欢迎来到奇迪科技(深圳)有限公司，超值服务提供卓越产品！
JS/JavaScript平滑滚动到指定位置、JQ/Jquery返回顶部_网络编程_奇迪科技(深圳)有限公司(www.qvdv.net)
JS/JavaScript平滑滚动到指定位置、JQ/Jquery返回顶部_网络编程_奇迪科技(深圳)有限公司(www.qvdv.net)
如何平滑滚动、滑动到页面底部、底部或者其他指定的位置？
下面分别介绍通过JS实现和通过JQ实现的方法：
1、JS实现
function goto(idName){
var dom = document.getElementById(idName);
dom.scrollIntoView({
behavior: 'smooth'
});
}自定义JS函数，参数idName：要滚动到页面位置的元素ID名称；
behavior：定义过渡动画，支持参数："auto"、"instant"、"smooth"，默认为"auto"
2、JQ实现：
$('html,body').animate({scrollTop:$('#top').offset().top}, 800);通过JQ实现，平滑动态滚动到特定位置说明：
代码中的"#top"中的top是元素ID名称,你也可以使用类名例如$('.top')，scrollTop:$('#top').offset().top：表示距离顶部的位置，用于准确定位；
代码中的”800"表示800毫秒，是时间参数，指滑动到指定位置所需的时间。
完整演示代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS/JavaScript平滑滚动到指定位置、JQ/Jquery返回顶部代码</title>
<script src="https://www.qvdv.net/public/js/jquery.js"></script>
</head>
<body style="text-align: center">
<p id="top">
<button type="button" onclick="goto('bottom')">点击这里，测试JS实现滚动到底部</button>
<button type="button" id="t">点击这里，通过JQ实现平滑滚动到页面底部</button>
</p>
<p id="bottom" style="margin-top: 2080px;">
<button type="button" onclick="goto('top')">点击这里，测试JS实现滚动到顶部指定位置</button>
<button type="button" id="b">点击这里，通过JQ实现平滑回到顶部位置</button>
</p>
<script>
//JS实现平滑滚动到指定位置的核心代码
//参数idName：要滚动到页面位置的元素ID名称
function goto(idName){
var dom = document.getElementById(idName);
dom.scrollIntoView({
behavior: 'smooth'
});
}
$("#b").click(function (){
//通过JQ实现，平滑动态滚动到顶部位置
$('html,body').animate({scrollTop:$('#top').offset().top}, 800);
});
$("#t").click(function (){
//通过JQ实现，平滑动态滚动到底部位置
$('html,body').animate({scrollTop:$('#bottom').offset().top}, 800);
});
</script>
</body>
</html>复制上面的演示代码，新建一个html页面保存，可查看测试效果。
本文版权所有，转载须注明：来源 https://www.qvdv.net/qvdv-oop-887.html