如何指定滾動到鏈接？

Question

我想這個代碼來實現，但一些代碼是如何不工作，

在我的HTML，

<ul id="menu1" class="menu1class"> 
    <li><a id="menuslide1">Home</a></li> 
    <li><a id="menuslide2">About us</a></li> 
    <li><a id="menuslide3">contact us</a></li> 
    <li><a id="menuslide4">other Links</a></li> 
</ul> 

還有，我有這個，

  <div id="div1">Home details</div> 
    <div id="div2">About us details</div> 
    <div id="div3">Contact us details</div> 
    <div id="div4">other link details</div> 

我需要向下滾動到我的特定頁面，點擊特定鏈接時。

我知道我可以使用基地，但需要給一些現實的動畫變化。有人可以幫助，這可以實現使用jQuery的動畫功能。

我試過以下，但似乎不工作，

  $('#menuslide2').click(function() { 
      $("html, body").animate({scrollTo: 800 }, 500); 
     }); 

任何幫助嗎？在此先感謝...

Answer 1

如果我沒看錯，你需要Smooth Scrolling To Internal Links With jQuery。您可以使用這樣的代碼：

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 
     var target = this.hash, 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
}); 

而且你需要改變你的HTML鏈接：

<ul id="menu1" class="menu1class"> 
    <li><a id="menuslide1" href="#div1">Home</a></li> 
    <li><a id="menuslide2" href="#div2">About us</a></li> 
    <li><a id="menuslide3" href="#div3">contact us</a></li> 
    <li><a id="menuslide4" href="#div4">other Links</a></li> 
</ul> 

Answer 2

那麼你問關於內部超鏈接這是很簡單。

<a href="#homesection">HOME</a> 
<a href="#AboutUssection">About Us</a> 
<a href="#Contactussection">Contact US</a> 
<a href="#otherlinkssection">Other Links</a> 



<div><a name="homesection">Home section Content Comes here..!!</a></div> 

<div><a name="AboutUssection">AboutUs section Content Comes here..!!</a></div> 

<div><a name="Contactussection">Contactus section Content Comes here..!!</a></div> 

<div><a name="otherlinkssection">otherlinks section Content Comes here..!!</a></div> 

但是這裏不會有動畫.. !!

希望這可以幫助你