更改#anchor的默认起始位置

2020/12/31 16:11 · jquery ·  · 0评论

我有一个带有锚的URL,该锚可以正常工作:

site.com/item/id#comment-233

打开后,锚点将恰好位于页面顶部。

如何更改起点?假设我希望它50px位于顶部。

我需要这个的原因是因为我在页面顶部有固定的层,因此注释似乎在固定的标头后面重叠了div

以防万一,由于跨浏览器的合规性,我更喜欢一种解决方案,该解决方案不涉及将注释的容器更改为固定并定位顶部减去标题高度。

假设您的<a>标签没有内容,请使用position:relative; top:-50px;

根据您的文档,您还必须将其包装在一个绝对值中 <div>

如果实施正确,这应该是跨浏览器兼容的。

编辑

这是我在本地完成的测试,在FF 3.6中效果很好

<html>

    <body style='margin:0; padding:0;'>
        <div style='position:fixed; height:50px; background-color:#F00; width:100%'>
        Fixed header
        </div>
        <div style='padding-top:50px'>
            <div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>
                <a name='linkhere' style='position:relative; top:-75px;'></a>
            Link here</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
        </div>
    </body>
</html>

根据上述建议,这对我来说很有效:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-30px; /* or whatever value you need */
}
.anchor{
  display: block;
  height: 115px; <!--same height as header-->
  margin-top: -115px; <!--same height as header-->
  visibility: hidden;
}

<span class="anchor"></span>
<div>content...</div>

来自http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/

添加“显示:块;” 为我解决了:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-50px;
    display: block;
}

此代码可在Firefox,Chrome,IE和其他可能的版本上运行:

<a id="comment-3" class="shifted_anchor">&nbsp;</a>
<div>
    ... comment ...
</div>

这是样式表:

a.shifted_anchor {
  position: relative;
  top: -35px;
  margin: 0;
  padding: 0;
  float: left;
}

关键是float属性:我们使用它来避免引起的额外垂直空间&nbsp;,这又是跨浏览器兼容性所必需的。

因此,我在这里结合了一些想法,并提出了一个对我和所有浏览器都适用的想法。空锚似乎不适用于Webkit浏览器,绝对不能在Chrome上运行。向锚点添加伪元素可解决此问题,而不会破坏布局。

a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
  content:"";
  float: left;
  height: 0px;
}

只需替换$offsetHeight为您需要的任何东西。

本文地址:http://jquery.askforanswer.com/genggaianchordemorenqishiweizhi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!