如何讓頁面滾動到某個部分的頂部，當該部分的ID被點擊作爲iink

Question

我有一段卡片上有一些信息。預期的效果是讓下一個和上一個箭頭向上或向下滾動到鏈接上卡（節）ID的頂部。下面是代碼的HTML和jQuery：

 <section class="backgroundBox" id="2"> 
      <div class="card"> 
        <div class="col-sm-5 col-sm-offset-0 right-side smallFontSize top-5112"> 
         <h3 class="green">Costs drop significantly as businesses embrace the digital workspace</h3> 
         <p class="center">41% of IT and business decision-makers saw improvements in total management costs by implementing digital workspace efforts, compared with 30% of peers who did not.</p> 
        </div> 
        <div class="col-sm-6 col-md-4 col-lg-5 col-sm-offset-1 col-lg-offset-0 center top-52 top-5112"> 
        <img src="http:/slideTwo.png" class="img-responsive"> 
        </div> 
      </div><!-- card --> 
      <div class="bmr-social col-xs-6"> 
        <ul class="social-list"> 
         <li><a href=""><img src="/social-fb-500.png" alt="facebook" class="img-responsive icon" height="30px" width="30px"></a></li> 
         <li><a href=""><img src="/social-twitter-500.png" alt="twitter" class="img-responsive icon" height="30px" width="30px"></a></li> 
         <li><a href=""><img src="/social-linkedin-500.png" alt="linkedin" class="img-responsive icon" height="30px" width="30px"></a></li> 
        </ul> 
      </div><!-- social --> 
      <div class="col-xs-5 col-xs-offset-1 arrows"> 
        <p class="right-side social-list"><a href="#1" class="nextPosition up-arrow">&#8593;</a> <a href="#3" class="nextPosition down">NEXT &#8595;</a></p> 
      </div><!-- arrows --> 
</section> 



    <script> 
     $('a[href^="#"]').on('click', function(event) { 
      $('html, body').animate({ 
       scrollTop: $("section").offset().top 
       }, 1000); 
     }); 

    </script> 

任何幫助，將不勝感激

Answer 1

下面是使用jQuery和工作演示的鏈接的例子。

function scrollToSection(containerID) 
{ 
    var target = $('#' + containerID); 

    event.preventDefault(); 
    $('html, body').animate({ 
      scrollTop: target.offset().top 
    }, 1000); 
} 

<button onclick="scrollToSection('section2');">Scroll to Section II</button> 

http://blog.regencysoftware.com/post/2015/12/09/jQuery-Scroll-To-Position-Demo