网页内跳转的页面的指定位置

网页内跳转的页面的指定位置

源代码 点击

1. 通过<a>标签和锚点进行跳转

1. <a>的href属性为当前第一个锚点，锚点的写法为href=’#xxx’。
2. 在<div>上设置锚点，即id属性

<!-- 通过锚点进行跳转 -->
<a href="#abc">点击跳转</a>
<!-- 跳转到的地方 -->
<div id="abc">点击跳转的地方</div>

2. 通过JS操作进行跳转

1. 设置点击跳转条件 button
2. 他其实是操作的BOM的location对象的href属性,href属性后跟锚点
3. 在<div>上设置锚点，即id属性

html

<!-- 设置跳转的按钮 -->
<button type="button" id="btn">点击跳转</button>
<!-- 跳转的锚点 -->
<div id="abc">跳转到此处</div>

js

const btn = document.getElementById("btn")
btn.onclick = function(){
	window.location.href = '#abc'
}

3. 有动画的跳转

3.1 使用jQuery

1. 使用jQuery主要用来操作整个html或者body的移动
2. 获取需要跳转的盒子距离的位置
3. 使用自定义动画的API

$('#btn').click(function(){
	$('html,body').animate({
		scrollTop:$('#abc').offset().top
	},1000)
	return false
})

• 通过这几行代码就能实现通过动画跳转到标签的相应位置

3.2 使用原生

1. 原生我们选择使用scrollTo()
2. 我们需要定义一个跳转的动画函数animationScroll()
3. 然后获取现有位置currentY,和目标位置currentY进行跳转

	/* 封装滚动的动画函数 */
	function animationScroll(currentY,targetY){
		timer = setInterval(()=>{
			let diff = Math.abs(currentY - targetY)
			if(diff < 5){
				scrollTo(0,targetY)
				clearInterval(timer)
			}else if(currentY < targetY){
				currentY += 5
				scrollTo(0,currentY)
			}else if(currentY > targetY){
				currentY -= 5
				scrollTo(0,currentY)
			}
		},1)
	}
	
	const btn = document.getElementById("btn")
	btn.onclick = function(){
		/* 获取currentY */
		const currentNode = document.getElementById("btn")
		/* 如果没有父级元素的定位，可以用offsetTop来进行替代getBoundingClientRect()也可以 */
		const cnPosition = currentNode.getBoundingClientRect()
		const currentY = cnPosition.top
		/* 获取targetY */
		const targetNode = document.getElementById("abc")
		const tnPosition = targetNode.getBoundingClientRect()
		const targetY = tnPosition.top
		/* 调用动画函数进行跳转 */
		animationScroll(currentY,targetY)
	}