JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法
本文實例講述了JavaScript控制網(wǎ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');
頁面將會平滑的滾動到元素elementID所在的位置
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
無閃爍更新網(wǎng)頁內(nèi)容JS實現(xiàn)
這篇文章主要介紹了無閃爍更新網(wǎng)頁內(nèi)容JS實現(xiàn),有需要的朋友可以參考一下2013-12-12用Javascript實現(xiàn)Sleep暫停功能代碼
ie和firefox都可以使用,有興趣可以試試2010-09-09uni-app使用uniCloud實現(xiàn)圖形驗證碼(uni-captcha)詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于uni-app使用uniCloud實現(xiàn)圖形驗證碼(uni-captcha)的相關(guān)資料,實際開發(fā)工作中在登陸的時候經(jīng)常需要圖形驗證碼,需要的朋友可以參考下2023-07-07JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理
頁面的展示,從外到內(nèi)的容器為:屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi),頁面展現(xiàn)在瀏覽器內(nèi),而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對象可以獲取這些容器的高度、寬度。容器的尺寸是指當(dāng)前分辨率下的高度和寬度(分辨率不同,值就不相同)。2023-02-02AngularJs中Bootstrap3 datetimepicker使用實例
這篇文章主要為大家詳細(xì)介紹了AngularJs中Bootstrap3 datetimepicker使用實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11javascript 實現(xiàn)鍵盤上下左右功能的小例子
這篇文章介紹了javascript 實現(xiàn)鍵盤上下左右功能的小例子,有需要的朋友可以參考一下2013-09-09在JavaScript里嵌入大量字符串常量的實現(xiàn)方法
在JavaScript文件里嵌入大量字符串常量是經(jīng)常遇到的事。有時為了省事,就把一些界面的HTML和CSS直接寫在JS文件里2013-07-07