单击链接并重定向到该内容

Question

我正在尝试创建一个功能，其中顶部将有多个链接，并且默认情况下将在同一页面中加载内容和标题。链接和标题将相关，因此单击链接将重定向到具有效果的特定 div（类似于单页应用程序）。例子：

Vision Mission Address Contact

Vision

Content here 

Mission

Content here 

Address

Content here 

Contact

Content here 

我不确定我是怎么做到的，但创建了一个实际上不相似的样本，可以说是一个试验。这不是我想要的：

$(document).ready(function()

{

  $(".subcontent").hide();

  $('#myMenu').on('click','a',function()

  {

    $('.subcontent:visible').hide();

    $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<ul id="myMenu">

  <li><a href="#" data-id="Vision">Vision</a></li>

  <li><a href="#" data-id="Mission">Mission</a></li>

</ul>

<section class="subcontent"  id="Vision" style="display:block" >

  <div class="page-heading">

     <h1 class="caption">Vision</h1>

  </div>

</section>

<section class="subcontent"  id="Mission" >

  <div class="page-heading">

     <h1 class="caption">Mission</h1>

  </div>

</section>

Answer 1

希望下面的片段能帮到你$(document).ready(function () {&nbsp; $('.top').click(function() {&nbsp; $('html, body').animate({&nbsp; &nbsp; scrollTop: $(".top-section").offset().top&nbsp; }, 1000)}),&nbsp;&nbsp; $('.middle').click(function (){&nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; scrollTop: $(".middle-section").offset().top&nbsp; &nbsp; }, 1000)&nbsp; }),&nbsp; $('.bottom').click(function (){&nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; scrollTop: $(".bottom-section").offset().top&nbsp; &nbsp; }, 1000)&nbsp; })&nbsp;&nbsp;&nbsp;$('.top-section').click(function (){&nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; scrollTop: 0&nbsp; &nbsp; }, 1000)&nbsp; })&nbsp;$('.middle-section').click(function (){&nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; scrollTop: 0&nbsp; &nbsp; }, 1000)&nbsp; })&nbsp; $('.bottom-section').click(function (){&nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; scrollTop: 0&nbsp; &nbsp; }, 1000)&nbsp; })});body,html {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; display: inline;}.top-section {&nbsp; background-color: green;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; display: flex;}.middle-section {&nbsp; background-color: yellow;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; display: flex;}.bottom-section {&nbsp; background-color: red;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; display: flex;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><div>&nbsp; &nbsp; <h4>Click on Top,Middle.Bottom will take to the section,Click on Click on section will take to the Top</h4>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <h5 class="top">Top</h5>&nbsp;&nbsp; &nbsp; <h5 class="middle">Middle</h5>&nbsp;&nbsp; &nbsp; <h5 class="bottom">Bottom</h5></div><div class="top-section">&nbsp; &nbsp; <h1>Top Section</h1></div><div class="middle-section">&nbsp; &nbsp; <h1>Middle Section</h1></div><div class="bottom-section">&nbsp; &nbsp; <h1>Bottom Section</h1></div>