歡迎來(lái)到奇迪科技(深圳)有限公司，超值服務(wù)提供卓越產(chǎn)品！
JS/JavaScript平滑滾動(dòng)到指定位置、JQ/Jquery返回頂部_網(wǎng)絡(luò )編程_奇迪科技(深圳)有限公司(m.cheanjie.com)
JS/JavaScript平滑滾動(dòng)到指定位置、JQ/Jquery返回頂部_網(wǎng)絡(luò )編程_奇迪科技(深圳)有限公司(m.cheanjie.com)
如何平滑滾動(dòng)、滑動(dòng)到頁(yè)面底部、底部或者其他指定的位置？
下面分別介紹通過(guò)JS實(shí)現和通過(guò)JQ實(shí)現的方法：
1、JS實(shí)現
function goto(idName){
var dom = document.getElementById(idName);
dom.scrollIntoView({
behavior: 'smooth'
});
}自定義JS函數，參數idName：要滾動(dòng)到頁(yè)面位置的元素ID名稱(chēng)；
behavior：定義過(guò)渡動(dòng)畫(huà)，支持參數："auto"、"instant"、"smooth"，默認為"auto"
2、JQ實(shí)現：
$('html,body').animate({scrollTop:$('#top').offset().top}, 800);通過(guò)JQ實(shí)現，平滑動(dòng)態(tài)滾動(dòng)到特定位置說(shuō)明：
代碼中的"#top"中的top是元素ID名稱(chēng),你也可以使用類(lèi)名例如$('.top')，scrollTop:$('#top').offset().top：表示距離頂部的位置，用于準確定位；
代碼中的”800"表示800毫秒，是時(shí)間參數，指滑動(dòng)到指定位置所需的時(shí)間。
完整演示代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS/JavaScript平滑滾動(dòng)到指定位置、JQ/Jquery返回頂部代碼</title>
<script src="http://m.cheanjie.com/public/js/jquery.js"></script>
</head>
<body style="text-align: center">
<p id="top">
<button type="button" onclick="goto('bottom')">點(diǎn)擊這里，測試JS實(shí)現滾動(dòng)到底部</button>
<button type="button" id="t">點(diǎn)擊這里，通過(guò)JQ實(shí)現平滑滾動(dòng)到頁(yè)面底部</button>
</p>
<p id="bottom" style="margin-top: 2080px;">
<button type="button" onclick="goto('top')">點(diǎn)擊這里，測試JS實(shí)現滾動(dòng)到頂部指定位置</button>
<button type="button" id="b">點(diǎn)擊這里，通過(guò)JQ實(shí)現平滑回到頂部位置</button>
</p>
<script>
//JS實(shí)現平滑滾動(dòng)到指定位置的核心代碼
//參數idName：要滾動(dòng)到頁(yè)面位置的元素ID名稱(chēng)
function goto(idName){
var dom = document.getElementById(idName);
dom.scrollIntoView({
behavior: 'smooth'
});
}
$("#b").click(function (){
//通過(guò)JQ實(shí)現，平滑動(dòng)態(tài)滾動(dòng)到頂部位置
$('html,body').animate({scrollTop:$('#top').offset().top}, 800);
});
$("#t").click(function (){
//通過(guò)JQ實(shí)現，平滑動(dòng)態(tài)滾動(dòng)到底部位置
$('html,body').animate({scrollTop:$('#bottom').offset().top}, 800);
});
</script>
</body>
</html>復制上面的演示代碼，新建一個(gè)html頁(yè)面保存，可查看測試效果。
本文版權所有，轉載須注明：來(lái)源 http://m.cheanjie.com/qvdv-oop-887.html