快捷導(dǎo)航

jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法

更新時(shí)間：2016年08月10日 09:55:17 作者：Quber

這篇文章主要介紹了jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法,涉及jQuery結(jié)合animate方法動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法。分享給大家供大家參考，具體如下：

一、Js代碼：

onload = function () {
  //初始化
  scrollToLocation();
};
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find('.son-panel:last');//滾動(dòng)到<div id="thisMainPanel">中類名為son-panel的最后一個(gè)div處
  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滾動(dòng)到<div id="thisMainPanel">中類名為son-panel的第六個(gè)處
  //非動(dòng)畫效果
  //mainContainer.scrollTop(
  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  //);
  //動(dòng)畫效果
  mainContainer.animate({
    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  }, 2000);//2秒滑動(dòng)到指定位置
}

二、Html代碼：

<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
    <div class="son-panel">我是類容區(qū)域-1</div>
    <div class="son-panel">我是類容區(qū)域-2</div>
    <div class="son-panel">我是類容區(qū)域-3</div>
    <div class="son-panel">我是類容區(qū)域-4</div>
    <div class="son-panel" style="height:160px;">我是類容區(qū)域-5</div>
    <div class="son-panel">我是類容區(qū)域-6</div>
    <div class="son-panel">我是類容區(qū)域-7</div>
    <div class="son-panel">我是類容區(qū)域-8</div>
</div>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例
下面小編就為大家分享一篇實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基礎(chǔ)上進(jìn)一步修改，版權(quán)信息僅保留致謝信息，刪除作者為了代碼整體提示美觀度，故將jQuery官方兩位數(shù)版本變更為三位數(shù)版本
2011-07-07
jquery插件corner實(shí)現(xiàn)圓角邊框的方法
這篇文章主要介紹了jquery插件corner實(shí)現(xiàn)圓角邊框的方法,實(shí)例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫效果的示例代碼
本篇文章主要是對(duì)jquery Ajax實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫效果的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結(jié)合實(shí)例形式詳細(xì)分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對(duì)比分析了四種方式的異同點(diǎn),需要的朋友可以參考下
2016-01-01
使用jquery+iframe做一個(gè)ajax上傳效果(實(shí)例)
下面小編就為大家?guī)硪黄褂胘query+iframe做一個(gè)ajax上傳效果(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
jQuery下擴(kuò)展插件和拓展函數(shù)的寫法（匿名函數(shù)使用的典型例子）
這些年，javascript火起來了，主要?dú)w功于AJAX的推廣應(yīng)用，Web2.0的發(fā)展。。。于是，出現(xiàn)了很多的javascript框架。
2010-10-10
jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
在修改數(shù)據(jù)時(shí)，有時(shí)候?yàn)榱朔奖?，我們希望能夠直接在表格里面?duì)數(shù)據(jù)進(jìn)行直接修改。
2009-08-08
jQuery使用手冊(cè)之一
jQuery使用手冊(cè)之一...
2007-03-03
基于jquery的大眾點(diǎn)評(píng)，分類導(dǎo)航實(shí)現(xiàn)代碼
基于jquery的大眾點(diǎn)評(píng)，分類導(dǎo)航實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-08-08