首页 前端知识 js和jQuery两种方式实现:点击按钮,平滑滚动到锚点处

js和jQuery两种方式实现:点击按钮,平滑滚动到锚点处

2024-06-10 11:06:17 前端知识 前端哥 448 348 我要收藏

js平滑滚动到锚点

var btn = document.getElementById('btn')
var target = document.getElementById('target')
btn.addEventListener('click', function() {
	window.scrollTo({
	  left: 0, // 横向滚动距离
	  top: target.offsetTop, // 竖向滚动距离
	  behavior: "smooth" // 平滑滚动
	})
})

jQuery平滑滚动到锚点

注意jQuery版本要用3以上的,我用的是jquery-3.5.1。用低版本的会有页面闪烁的问题。

$('.btn').click(function() {
	$('html,body').animate({
		scrollTop: $('#target').offset().top
	}, 600)
})
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11737.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

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