页面内锚点定位及跳转方法总结（推荐）_页面内锚点定位及跳转方法总结,页面内锚点跳转

105 浏览量更新于2023-03-16 评论收藏 49KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

页面内锚点定位及跳转方法总结（推荐）页面内锚点定位及跳转方法总结（推荐）

接着上一篇，其实是一个功能，本来感觉挺简单的一个问题，没想到遇到两个坎儿，无语。。。

上一篇是关于scroll事件绑定的问题，这一篇的问题是：点击锚点跳转到相应DIV的问题。

最简单的方法是锚点用<a>标签，在href属性中写入DIV的id。如下：

<!DOCTYPE html>

<html>

<head>

<style>

div {

height: 800px;

width: 400px;

border: 2px solid black;

}

h2 {

position: fixed;

margin:50px 500px;

}

</style>

</head>

<body>

<h2>

</h2>

</body>

</html>

这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。　

第二种方式是在js事件中通过window.location.hash=”divId”跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻

烦。

第三种方法是用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

$("#div1Link").click(function() {

$("html, body").animate({

scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});

return false;

});

$("#div2Link").click(function() {

$("html, body").animate({

scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});

return false;

});

$("#div3Link").click(function() {

$("html, body").animate({

scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});

return false;

});

</script>

注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。　　　

$(“html, body”)可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。

另外，脚本可以进一步优化，自己来试试

这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。

缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。

第四种方法是用js的srollIntoView方法，直接用:

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38581455

粉丝: 2
资源: 895

会员权益专享

页面内锚点定位及跳转方法总结（推荐）

评论0

会员权益专享

最新资源

页面内锚点定位及跳转方法总结（推荐）

评论0

JS如何实现在页面上快速定位（锚点跳转问题）

js导航栏A标签锚点跳转

jQuery锚点带动画跳转特效.zip

jQuery网站右侧锚点定位跳转导航菜单代码

vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

uni app锚点定位 、自动吸顶、滚动自动选择对应的锚点

html中a标签锚点定位的运用

uniapp 锚点定位 、自动吸顶、滚动自动选择对应的锚点

html锚点定位滚动效果

html锚点定位向下偏移,CSS解决链接锚点定位偏移的代码

html锚点定位往上一点

elementui锚点定位

markdown 锚点定位

css a标签定位锚点动画

跳转到页面A设置的锚点处，这个在网站设计中起到什么作用

Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动

vue3 跨组件锚点

a标签跳转锚点如何在页面中间展示

html 页面内跳转

HTML-----锚点定位有滚动效果

会员权益专享

最新资源

uni app锚点定位、自动吸顶、滚动自动选择对应的锚点

uniapp 锚点定位、自动吸顶、滚动自动选择对应的锚点

Vue3+ts 跳转页面定位到某个位置 scrollIntoView 锚点滚动