目录
- 1.简介
- 2.实现方式
- 2.1 css实现
- 3.1 js实现
1.简介
a标签的href 属性用于指定超链接目标的 URL,能够跳转到href中指定的页面或指定的位置。
锚点能够跳转到当前页面中指定的位置,使用id来使用锚定URL。
点击链接到标题即可跳转到这是标题,底部链接可以链接到这模块.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<a id="top">这是标题,底部链接可以链接到这</a>
</div>
<div>
<a href="#top">链接到标题</a>
</div>
</body>
</html>
但是在实际应用中,点击后直接跳转到页面的指定位置,无动画,跳转过程很生硬。
可以通过css/js两种方式实现点击锚点平滑滚动至指定位置。
2.实现方式
2.1 css实现
将scroll-behavior:smooth写在滚动容器元素上,可以让容器的滚动变得平滑。
html, body {
position: relative;
height: 100%;
scroll-behavior: smooth;
}
scroll-behavior 属性为一个滚动框指定滚动行为
scroll-behavior: smooth | auto ;
auto (默认值):表示滚动框立即滚动到指定位置。
smooth :表示在页面滚动时采用平滑滚动,不直接滚动到指定位置,例如回到顶部按钮和锚点。
3.1 js实现
$("a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1000);
return false;
});
offset() 方法设置或返回被选元素的left或者top相对于文档的偏移坐标。(注:offset()方法时jquery的方法,需要引入jquery才能使用。)
$(".div").offset() 获得位移对象
$(".div").offset().top 获得位移高度
$(this).attr(“href”) 是获取你所点击的a标签的href属性值。
scrollTop() 方法设置或返回被选元素的垂直滚动条位置,例如scrollTop: 100px 就是滑动到距离顶部100px处。
animate() 方法通过 CSS 样式将元素从一个状态改变为另一个状态,CSS属性值是逐渐改变的,这样就可以创建动画效果。1000则是指动画完成时间:1000毫秒。
如果对你有所帮助,请记得一键三联哦