2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 锚点定位——如何设置锚点居页面顶部距离 锚点定位并距离顶部一定偏移

锚点定位——如何设置锚点居页面顶部距离 锚点定位并距离顶部一定偏移

时间:2019-06-22 15:36:04

相关推荐

锚点定位——如何设置锚点居页面顶部距离 锚点定位并距离顶部一定偏移

锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。

使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。

创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。

1.普通锚点

<a href="#aboutmao" >锚点链接</a>...<div id="aboutmao">锚点跳转到这里</div>

这些是可以实现完美的锚点功能,但是如果我网页的header一直固定在顶部,这是锚点链接过去就需要居顶一个header的距离,不然链接过去一部风内容会被header遮挡。

比如这样:

我们想要的效果:

这个问题用js解决是最方便的:

<a href="javascript:;" class="aboutmao">关于我们</a><div id="about">锚点跳转到这里</div><script>$(document).ready(function () {function topMao(target) {$('html, body').animate({scrollTop: $(target).offset().top - $('.topnav').height() //顶部固定导航}, 500); //130为锚点到距顶部的距离,500为执行时间return false;}$('.aboutmao').click(function () {topMao('#about');}) })</script>

锚点的点击事件,然后获取此 id 距离网页顶端的距离,减去header的高度,最后用window.scrollTo直接滑动到锚点位置。已在ie10+、火狐 、谷歌浏览器上测试ok。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。