首页 前端知识 实现点击锚点平滑滚动至指定位置

实现点击锚点平滑滚动至指定位置

2024-02-15 14:02:39 前端知识 前端哥 163 522 我要收藏

目录

  • 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毫秒。
如果对你有所帮助,请记得一键三联哦

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2071.html
标签
评论
发布的文章

01-10jQuery框架

2024-03-01 12:03:59

JS jQuery基础2

2024-03-01 12:03:54

jQuery实现文件上传

2024-03-01 12:03:53

JQuery简介与解析

2024-03-01 12:03:31

jquery上传图片单图多图

2024-03-01 12:03:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!