页面中添加锚点的几种方式

番茄西红柿发布于2019-04-23 13:13 / 2928人阅读

摘要：本文档创建时间方法一使用标签添加通过设置标签的属性跳转到页面中指定标签的位置标签的属性值前要增加来作为标识表示是在当前页面的内部跳转简单的案例设置锚点的标签跳一跳跳转到的锚点位置跳到这里此方法的弊端有很多比如会改变

本文档创建时间:2018-11-7 15:52:28

方法一,使用a标签添加

通过设置a标签的href属性,跳转到页面中指定id标签的位置
a标签的href属性值前要增加#来作为标识,表示是在当前页面的内部跳转

简单的案例:

 1 <html>
 2 <head>head>
 3 <body>
 4 
 5 <a href=#miao>跳一跳a>
 6 <br />
 7 
 8 <h3 id=miao>跳到这里..h3>
 9 body>
10 html>

此方法的弊端有很多,比如会改变地址栏参数,跳转比较突兀,对用户不友好等...

所以,如果你比较注重细节,有这方面的强迫症,建议使用下面这种方法.

方法二,使用jQuery的animate动画跳转

废话不说,先上代码:

 1 <html>
 2 <head>
 3     <title>title>
 4 <script>
 5     $(document).ready(function () {
 6         //点击触发事件
 7         $("#jumpNow").click(function () {
 8             $("html,body").animate({
 9                 scrollTop: $("#imhere").offset().top//跳转到的位置
10             }, {
11                     duration: 400,//预定速度
12                     easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
13                 });
14         });
15 
16 });
17 script>
18 head>
19 
20 <body>
21 
22 <span id=jumpNow>跳一跳span>
23 <br />
24 
25 <h3 id=imhere>跳到这里...h3>
26 body>
27 
28 html>

jQuery的animate是实现页面动画的函数,功能比较强大,实现一个锚点跳转绰绰有余.想学习animate函数的小伙伴可点击参考此文档:https://www.cnblogs.com/yixiaoheng/p/3505638.html

此方法可以控制动画跳转的速度和方式,并且不会改变地址栏的参数,相对来说比较优雅.墙裂建议使用此方法!over...

混合云超融合服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式 asp锚点的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1587.html

页面快速定位到指定位置的几个方法

摘要：但是就页面定位到指定位置其实还有更好的办法，就是使用去获取指定位置的，这样的话还可以加滑动动画，使定位的这个过程比较平滑。需求页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。需求分析拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js 解法想到使用锚点...

AlanKeene 2019-08-22 18:10 评论0 收藏0
页面快速定位到指定位置的几个方法

摘要：但是就页面定位到指定位置其实还有更好的办法，就是使用去获取指定位置的，这样的话还可以加滑动动画，使定位的这个过程比较平滑。需求页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。需求分析拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js 解法想到使用锚点...

yvonne 2019-08-05 14:11 评论0 收藏0
返回顶部的几种实现

摘要：返回顶部这里初始状态的返回顶部为不可见，通过判断页面滚动高度切换显示隐藏，的样式可以自己设计。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回顶部的按钮大家并不陌生，针对长滚动条的信息流页面添加返回顶部的按钮可以给用户良好的体验，而返回顶部的实现也是多种多样，本文分享几个案例并给出评价作为引子讲一个常用的案例...

SillyMonkey 2019-08-02 15:56 评论0 收藏0
返回顶部的几种实现

摘要：返回顶部这里初始状态的返回顶部为不可见，通过判断页面滚动高度切换显示隐藏，的样式可以自己设计。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回顶部的按钮大家并不陌生，针对长滚动条的信息流页面添加返回顶部的按钮可以给用户良好的体验，而返回顶部的实现也是多种多样，本文分享几个案例并给出评价作为引子讲一个常用的案例...

silvertheo 2019-08-22 10:48 评论0 收藏0
总结跨域的几种方式

摘要：比如域的页面通过嵌入了一个域的页面，可以通过以下方法实现和的通信通过跨域以上几种都是双向通信的，即两个，页面与或是页面与页面之间的，下面说几种单项跨域的一般用来获取数据，因为通过标签引入的是不受同源策略的限制的。跨域整理@(前端笔记) 跨域只要协议、域名、端口有任何一个不同，都被当作是不同的域。由于浏览器的同源策略，其限制之一是不能通过ajax的方法情趣请求不同源的文档。第二个限制...

diabloneo 2019-08-21 17:52 评论0 收藏0