Question

我正在使用锚标签跳转到页面上的某些问题。并且容器顶部有一个粘性容器（position: fixed）。

<div class="main_container">
  <div class="jump_to_questions">
    <a href="#question_30">Jump to question 30</a>
  </div>  

  <div class="questions">
    # a bunch of questions...
    <a name="question_30">30</a>
  </div>  
</div>

点击.jump_to_questions_container中的链接时;问题30跳到.main_container的顶部并落在固定容器（具有z-index: 5）之后。有没有办法可以将链接位置（点击后）设置在固定容器下面？

我已经尝试将padding-top和margin_top添加到.questions div ...但是这只是将所有内容都按指定数量推送。

Answer 1

一种方法是将内部链接与实际问题分开，它们之间的空间应该是> =固定容器的高度。假设50px是固定容器的高度

<a href="#question-30">Go To Question 30</a>
...
...
<a name="question-30"></a>
<div style="height: 50px;clear:both;width: 100%"></div>
<a href="something">Your actual question</a>

应该工作

Answer 2

锚链接必须以井号开头＃34;＃＆＃34;。

<a href="#question_30">Jump to question 30</a>

Answer 3

如果你可以在你的页面上使用jquery代码，那么请尝试使用jquery代码

$(".jump_to_questions a").click(function(e){
 e.preventDefault();
 $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('.fixed-container-class').outerHeight()},1000);
});

点击链接

会顺利滚动到所需的部分

您需要使用实际固定容器类或id

更改fixed-container-class

当前页面上的锚点链接不会跳转到容器的顶部

3 个答案: