网页内跳转的页面的指定位置
源代码 点击
1. 通过<a>
标签和锚点进行跳转
<a>
的href
属性为当前第一个锚点,锚点的写法为href=’#xxx’。- 在
<div>
上设置锚点,即id
属性
<!-- 通过锚点进行跳转 -->
<a href="#abc">点击跳转</a>
<!-- 跳转到的地方 -->
<div id="abc">点击跳转的地方</div>
2. 通过JS操作进行跳转
- 设置点击跳转条件
button
- 他其实是操作的
BOM
的location
对象的href
属性,href
属性后跟锚点 - 在
<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
- 使用jQuery主要用来操作整个
html
或者body
的移动 - 获取需要跳转的盒子距离的位置
- 使用自定义动画的API
$('#btn').click(function(){
$('html,body').animate({
scrollTop:$('#abc').offset().top
},1000)
return false
})
- 通过这几行代码就能实现通过动画跳转到标签的相应位置
3.2 使用原生
- 原生我们选择使用
scrollTo()
- 我们需要定义一个跳转的动画函数
animationScroll()
- 然后获取现有位置
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)
}