如何通过#id转到链接时更改位置？

Question

如何在# id转到某个链接时更改位置？

意思是，我有一个锚标签，例如：<a href="#src">SRC</a>，所以当我点击标签时它会显示我：

（即将进行的测验上方的div），但我希望它为：

（当我点击链接时，即将进行的测验上方的div将显示！）

我是全新的，所以我不知道该怎么做。

此外，如果您visit here浏览器宽度较小，我会很有帮助，并点击切换按钮并转到其中任何一个链接。

我想要的是，如果我们点击链接，它应该转到那个div（转）并且还会折叠该导航栏。

对于第二个问题，我尝试了以下代码：

<a class="nav-link" href="#oq" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

Answer 1

以下是您需要做的一个非常简单的示例：

 $(function() {
  $("#scrolltoblock").on("click", (e) => {
    let yBlockOffset = $("#scrolltome").offset().top;
    let headerHeight = $(".header").height();
    let margins = parseInt($("#scrolltome").css('margin-top'));
    let totalScroll = yBlockOffset - headerHeight - margins;

    $('html, body').animate({
        scrollTop: totalScroll
    }, 1000);

    e.preventDefault();
  });
 });

div {
  height: 300px; 
  width: 100%;
  background-color: darkgreen; 
  margin: 1em 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: orange; 
  height: 100px;
  margin: 0;
}

#scrolltome {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"><a id="scrolltoblock" href="#scrolltoyellowblock">Find yellow block!</a></div>
<div></div>
<div></div>
<div></div>
<div id="scrolltome"></div>
<div></div>
<div></div>

可能在代码结构或一般模型或灵活性方面没有任何好处，但我想我已经让你了解它是如何工作的，所以你可以继续讨论这个主题。

希望它有所帮助！