什么是HTML锚点,锚点应该如何用

什么是HTML锚点,锚点应该如何用,第1张

当a使用name属性时,<a>就是一个锚点,锚点的作用是:如果你的网页很长的话,你可以使用锚点跳到页面的某一部分,例如:

<a href="#here">点击这里转到我的博客</a>

...

...

...

<a name="here">我的博客</a>

当点击上面链接时就可直接将网页滚动到加入相应锚点的"here"地方。

注意:在一些浏览器,如IE、Firefox中,可以使用ID代替name,但这并不所有的浏览器都支持的。

使用jquery的动画做滑动效果;

obj为需要做跳转到锚点的a标签对象

400 为滑动的速度(可以改成你需要的速度,单位是毫秒)

/*

*锚点点击跳转

*/

var AnchorClick = function (obj) {

    var href = $(obj).attr("href")

    var pos = $(href).offset().top

    $("html,body").animate({ scrollTop: pos }, 400)

}

1、引入bootstrap文件

2、通过a的href 和id对应实现

<div class="col-xs-3" id="myScrollspy">

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">

<li class="active"><a href="#section-1">第一部分</a></li>

<li><a href="#section-2">第二部分</a></li>

<li><a href="#section-3">第三部分</a></li>

<li><a href="#section-4">第四部分</a></li>

<li><a href="#section-5">第五部分</a></li>

</ul>

</div>

<h2 id="section-1">第一部分</h2>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6098980.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存