scrollTop()
scrollTop() jQuery 方法用于滚动到页面的特定部分。
动画此方法将使滚动更平滑：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#textDiv {
height: 1500px;
}
p {
margin-top: 100px;
height: 500px;
}
</style>
</head>
<body>
<div id='linkDiv'>
<a href="#link1" class="scrollLink">Scroll to link1</a>
<a href="#link2" class="scrollLink">Scroll to link2</a>
</div>
<div id="textDiv">
<p id="link1">锚点1</p>
<p id="link2">锚点2</p>
</div>
<script>
$(document).ready(function() {
$("a.scrollLink").click(function(event) {
event.preventDefault();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
});
</script>
</body>
</html>
如果目标元素没有 id，并且我们通过其名称链接到它，则可以使用以下脚本：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#textDiv {
height: 1500px;
}
p {
margin-top: 100px;
height: 500px;
}
</style>
</head>
<body>
<div id='linkDiv'>
<a href="#link1" class="scrollLink">Scroll to link1</a>
<a href="#link2" class="scrollLink">Scroll to link2</a>
</div>
<div id="textDiv">
<p id="link1">锚点1</p>
<p id="link2">锚点2</p>
</div>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function() {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
});
</script>
</body>
</html>
为了提高性能，你可以缓存 $('html, body') 选择器，这样它就不会在每次点击锚链接时运行：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#textDiv {
height: 1500px;
}
p {
margin-top: 100px;
height: 500px;
}
</style>
</head>
<body>
<div id='linkDiv'>
<a href="#link1" class="scrollLink">Scroll to link1</a>
<a href="#link2" class="scrollLink">Scroll to link2</a>
</div>
<div id="textDiv">
<p id="link1">锚点1</p>
<p id="link2">锚点2</p>
</div>
<script>
let $root = $('html, body');
$(document).ready(function() {
$(a.scrollLink).click(function() {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
});
</script>
</body>
</html>
要更新 URL，请在 animate 回调中执行此操作：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
#textDiv {
height: 1500px;
}
p {
margin-top: 100px;
height: 500px;
}
</style>
</head>
<body>
<div id='linkDiv'>
<a href="#link1" class="scrollLink">Scroll to link1</a>
<a href="#link2" class="scrollLink">Scroll to link2</a>
</div>
<div id="textDiv">
<p id="link1">连接1</p>
<p id="link2">连接2</p>
</div>
<script>
let $root = $('html, body');
$('a[href^="#"]').click(function() {
let href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function() {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
hash 属性用于设置或者返回 href 属性值的锚点部分。
scrollTop() 方法通过将其包含在 animate() 方法中并以毫秒为单位定义动画的持续时间来进行动画处理。
值越大，动画越慢。
scrollIntoView()
scrollIntoView() 方法用于将用户的视图滚动到调用它的元素。
将此值设置为“smooth”的行为属性将使页面平滑滚动：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#element {
height: 200px;
width: 350px;
overflow: auto;
}
#el1 {
height: 200px;
width: 1000px;
}
#el2 {
height: 100px;
width: 1000px;
}
</style>
</head>
<body>
<div>
<button onclick="scrollFunction1()"> Scroll to element-1 </button>
<br>
<button onclick="scrollFunction2()"> Scroll to element-2 </button>
<br>
<br>
<br>
<div id="element">
<h2>
Click on the scroll button
</h2>
<div id="el1">
<h2>Element-1</h2> </div>
<div id="el2">
<h2>Element-2</h2> </div>
</div>
</div>
<script>
function scrollFunction1() {
let e = document.getElementById("el1");
e.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'start'
});
}
function scrollFunction2() {
let e = document.getElementById("el2");
//This ends the block to the window
//bottom and also aligns the view to the center
e.scrollIntoView({
block: 'end',
behavior: 'smooth',
inline: 'center'
});
}
</script>
</body>
</html>
平滑滚动允许只需单击一次即可在页面节之间跳转，而无需手动上下滚动。在你的网页上有这个功能肯定会得到用户的赞赏。那么，让我们看看使用什么方法来创建平滑滚动。
日期：2020-06-02 22:16:15 来源：oir作者：oir