添加自动偏移为所有哈希连接/呼叫的滚动位置(Adding an automatic offset t

2019-06-26 03:46发布

我有以下问题:

像在Facebook上,我已经在页面始终可见的顶部的菜单栏( position: fixed; )。 现在当我点击我的页面哈希链接(或URL中的散列加载一个新的页面)跳转到页面上的某个元素,浏览器始终滚动此元素的页面的最顶端,这意味着元素是顶部的菜单栏后面,事后。

我想补充一些JavaScript(jQuery的或正常的Javascript),以使关联元素顶部的菜单栏的正下方放置一个链接被点击时会自动添加一个(负)偏移,这样滚动位置或页面加载。 但我不只是想给事件侦听器添加到照顾这所有链接。 我也想这样的作品,如果网页加载在使用浏览器的地址栏中的URL的哈希部分(或当在URL的末尾链接到不同的网页用哈希)的解决方案。

您可以在我的页面的clickdummy http://loud.fm/tmp/details.html 。 点击在图像的左侧右上方跳转到评论的评论泡。 如果你的浏览器窗口是足够小,你应该列出评论前跳转到灰色“意见”标题和分页的权利。 我想右顶菜单要显示的标题和分页,被点击跳转链接之后。

你能帮我这个问题,好吗? 提前致谢! :)

问候,勒内

Answer 1:

其实,我找到了解决办法我自己,为我工作,只使用CSS:

我加了margin-top: -40px;padding-top: 40px; 该跳链接被指向的元素。 这适用于所有的主流浏览器:IE(7-9),Firefox,歌剧,Chrome和Safari。

唯一的问题是:如果这个元素浮动元素后,负利润率不工作(这意味着积极的填充变得可见)。 请评论,如果有人知道一个解决方案/解决方法。 我会更新我的职务呢。 谢谢!



Answer 2:

要添加到这个解决方案,我发现,设置显示为无填充解决的问题,其中包括浮动元素使用时可见。

所以:

.symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: hidden;
}

我还包括这种风格如上面我的目标内容的空div权。



Answer 3:

我发现增加了这种方式:before在CSS似乎运作良好。

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

更多的CSS技巧网站



Answer 4:

例如,考虑d的bootDoc的解决方案,在所有主流浏览器的工作原理:

CSS(插入您的标题栏的高度,而不是40px ):

.symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: inline-block;
}

HTML:

<h3>
    <span class="symbol-target" id="myTarget">&nbsp;</span>
    <a href="#myTarget">My text</a>
</h3>

真实页例如:

std.array.uninitializedArray使用文档bootDoc

注意:

它不会对IE 6的工作。



Answer 5:

该工作最适合我的事情是这样做:

  1. 给指定的ID(你在URL所希望的)所要求的元素中的不同元素。
  2. 作出这样的新的元素的绝对和移动它X像素所需的元件,其中X是所述固定报头的高度的上方。


Answer 6:

不幸的是(至少使用Firefox)既不填充也不利润率在这里帮助(把他们在“主”包含分区的一切,但菜单栏); 滚动到锚总是把它放在页面的最顶端,固定元素被定罪。

我认为你将不得不去与你原来的想法,但要记住,通过委派你可以设置只有一个处理程序,它会在你的菜单栏的所有环节,包括动态添加的那些工作。



Answer 7:

尝试把填充在你页面的顶部占据了菜单栏后面的区域。 喜欢的东西: padding-top:80px; (而不是80px你应该把你的菜单栏的高度)。



Answer 8:

使用纯JavaScript,你可以做到以下几点。 它会听一个click事件给所有的锚标记,并做滚动到页面(这是使用jQuery)所需的位置:

/* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function gotoSpecificPosition() {
  if (window.location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
  }
}

/* Captures click events on all anchor tag with a hash tag */
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

window.setTimeout(offsetAnchor, 0);

上面的代码将处理所有的招数。



文章来源: Adding an automatic offset to the scroll position for all hash-links/calls