JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
更新時(shí)間：2015年04月17日 09:51:49 作者：dingding
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法,實(shí)例分析了javascript操作頁面滾動(dòng)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法。分享給大家供大家參考。具體如下：
function elementPosition(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return { x: curleft, y: curtop };
}
function ScrollToControl(id)
{
var elem = document.getElementById(id);
var scrollPos = elementPosition(elem).y;
scrollPos = scrollPos - document.documentElement.scrollTop;
var remainder = scrollPos % 50;
var repeatTimes = (scrollPos - remainder) / 50;
ScrollSmoothly(scrollPos,repeatTimes);
window.scrollBy(0,remainder);
}
var repeatCount = 0;
var cTimeout;
var timeoutIntervals = new Array();
var timeoutIntervalSpeed;
function ScrollSmoothly(scrollPos,repeatTimes)
{
if(repeatCount < repeatTimes)
{
window.scrollBy(0,50);
}
else
{
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('"+scrollPos+"','"+repeatTimes+"')",10);
}
使用方法：
ScrollToControl('elementID');
頁面將會(huì)平滑的滾動(dòng)到元素elementID所在的位置
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
無閃爍更新網(wǎng)頁內(nèi)容JS實(shí)現(xiàn)
這篇文章主要介紹了無閃爍更新網(wǎng)頁內(nèi)容JS實(shí)現(xiàn)，有需要的朋友可以參考一下2013-12-12
用Javascript實(shí)現(xiàn)Sleep暫停功能代碼
ie和firefox都可以使用,有興趣可以試試2010-09-09
uni-app使用uniCloud實(shí)現(xiàn)圖形驗(yàn)證碼(uni-captcha)詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于uni-app使用uniCloud實(shí)現(xiàn)圖形驗(yàn)證碼(uni-captcha)的相關(guān)資料,實(shí)際開發(fā)工作中在登陸的時(shí)候經(jīng)常需要圖形驗(yàn)證碼,需要的朋友可以參考下2023-07-07
JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對(duì)比整理
頁面的展示，從外到內(nèi)的容器為：屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi)，頁面展現(xiàn)在瀏覽器內(nèi)，而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對(duì)象可以獲取這些容器的高度、寬度。容器的尺寸是指當(dāng)前分辨率下的高度和寬度（分辨率不同，值就不相同）。2023-02-02
AngularJs中Bootstrap3 datetimepicker使用實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJs中Bootstrap3 datetimepicker使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11
javascript 實(shí)現(xiàn)鍵盤上下左右功能的小例子
這篇文章介紹了javascript 實(shí)現(xiàn)鍵盤上下左右功能的小例子，有需要的朋友可以參考一下2013-09-09
在JavaScript里嵌入大量字符串常量的實(shí)現(xiàn)方法
在JavaScript文件里嵌入大量字符串常量是經(jīng)常遇到的事。有時(shí)為了省事，就把一些界面的HTML和CSS直接寫在JS文件里2013-07-07
這篇文章主要從作用域鏈談閉包，閉包（closure）是Javascript語言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)，本文針對(duì)閉包進(jìn)行學(xué)習(xí),需要的朋友可以參考下2015-12-12
這篇文章主要介紹了php，js，css字符串截取的辦法，其實(shí)沒有什么技術(shù)含量，就是記錄一下，方便自己復(fù)習(xí)鞏固，希望對(duì)大家能有所幫助2014-09-09