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

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

2024-06-10 11:06:17 前端知识 前端哥 437 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
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

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