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