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

Question

我正在尝试创建一个功能，其中顶部将有多个链接，并且默认情况下将在同一页面中加载内容和标题。链接和标题将相关，因此单击链接将重定向到具有效果的特定 div（类似于单页应用程序）。例子：Vision Mission Address ContactVisionContent here MissionContent here AddressContent here ContactContent 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 () {

  $('.top').click(function() {

  $('html, body').animate({

    scrollTop: $(".top-section").offset().top

  }, 1000)

}), 

  $('.middle').click(function (){

    $('html, body').animate({

      scrollTop: $(".middle-section").offset().top

    }, 1000)

  }),

  $('.bottom').click(function (){

    $('html, body').animate({

      scrollTop: $(".bottom-section").offset().top

    }, 1000)

  })

  

 $('.top-section').click(function (){

    $('html, body').animate({

      scrollTop: 0

    }, 1000)

  })

 $('.middle-section').click(function (){

    $('html, body').animate({

      scrollTop: 0

    }, 1000)

  })

  $('.bottom-section').click(function (){

    $('html, body').animate({

      scrollTop: 0

    }, 1000)

  })

});

body,

html {

  width: 100%;

  height: 100%;

  margin: 0;

  display: inline;

}

.top-section {

  background-color: green;

  height: 100%;

  width: 100%;

  display: flex;

}

.middle-section {

  background-color: yellow;

  height: 100%;

  width: 100%;

  display: flex;

}

.bottom-section {

  background-color: red;

  height: 100%;

  width: 100%;

  display: flex;

}

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

<div>

    <h4>Click on Top,Middle.Bottom will take to the section,Click on Click on section will take to the Top</h4>

    

    <h5 class="top">Top</h5> 

    <h5 class="middle">Middle</h5> 

    <h5 class="bottom">Bottom</h5>

</div>

<div class="top-section">

    <h1>Top Section</h1>

</div>

<div class="middle-section">

    <h1>Middle Section</h1>

</div>

<div class="bottom-section">

    <h1>Bottom Section</h1>

</div>