JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法
更新時間：2015年04月17日 09:51:49 作者：dingding
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法,實例分析了javascript操作頁面滾動的技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了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)文章
iframe里的值在實現(xiàn)一些比較特殊功能時需要獲取的，下面為大家詳細介紹下使用javascript獲取iframe里值的方法，感興趣的各位可以參考下哈2013-06-06
詳解微信小程序?qū)崿F(xiàn)跑馬燈效果（附完整代碼）
這篇文章主要介紹了微信小程序跑馬燈效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要分享了js實現(xiàn)適合新聞類圖片輪播效果的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS正則表達式修飾符global(/g)用法,結(jié)合實例形式分析了JS全局匹配修飾符/g的功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
用javascript代替marquee的滾動字幕效果代碼...2007-04-04
虛擬列表不是什么神秘的東西,下面這篇文章主要給大家介紹了關(guān)于微信小程序虛擬列表的應(yīng)用實例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
讓FireFox支持innerText的實現(xiàn)代碼
DHTML非標(biāo)準(zhǔn)屬性innerText在FireFox中的使用2009-12-12
使用coffeescript編寫node.js項目的方法匯總
Node.js 基于JavaScript編寫應(yīng)用，JavaScript是我的主要開發(fā)語言。CoffeeScript是編譯為JavaScript的編程語言。CoffeeScript是一個非常高階的語言，將JavaScript、Ruby和Python中我最愛的部分結(jié)合在了一起。小編給大家介紹下使用coffeescript編寫node.js項目的方法2015-08-08
javascript 產(chǎn)生隨機數(shù)的幾種方法總結(jié)
這篇文章主要介紹了javascript 產(chǎn)生隨機數(shù)的幾種方法總結(jié)的相關(guān)資料,希望通過本文大家能夠掌握如何實現(xiàn)這樣的方法，需要的朋友可以參考下2017-09-09
JavaScript實現(xiàn)文字跟隨鼠標(biāo)特效
這篇文章主要介紹了JavaScript如何實現(xiàn)文字跟隨鼠標(biāo)特效,d代碼簡單易操作，感興趣的朋友可以參考下2015-08-08