JQuery在平滑滾動到一個元素時點擊一個對應的元素

Question

我希望能夠在兩個元素之間平滑滾動。我一直在使用這個腳本在鏈接和錨點之間滾動。我希望重新使用這個腳本，以允許基於每個元素的「id」部分的各種元素類型進行平滑滾動。

---

這裏的原始腳本

JQuery smooth scrolling when clicking an anchor link - 見下文

$(document).ready(function(e) { 
    //SCROLL TO ANCHOR TAG 
    var $root = $('html, body'); 

    $('a').click(function() { 
      $root.animate({ 
       scrollTop: $($.attr(this, 'href')).offset().top 
      }, 2000); 
     return false; 
    }); 
}); 

---

這裏就是我高達

我想修改腳本，以便它會點擊一個span或div，然後滾動到一個li其中有一組ID之間的工作：

<ul> 
    <li id="1">frame 1 - <span id="goto2" class="goto">go to frame 2</span></li> 
    <li id="2">frame 2 - <span id="goto3" class="goto">go to frame 3</span></li> 
    <li id="3">frame 3 - <span id="goto4" class="goto">go to frame 4</span></li> 
    <li id="4">frame 4 - <span id="goto5" class="goto">go to frame 5</span></li> 
    <li id="5">frame 5 - <span id="goto1" class="goto">go to frame 1</span></li> 
</ul> 

這裏就是我到我上面的腳本進行修改。

$(document).ready(function(e) { 
    //SCROLL TO ANCHOR TAG 
    var $root = $('html, body'); 

    var $gotoid = $('.goto').attr('id'); 
    var $justid = $gotoid.replace('goto',''); 


    $('.goto').click(function() { 
     console.log($gotoid); 
     console.log($justid); 
      $root.animate({ 
       scrollTop: $($.attr(this, 'href')).offset().top 
      }, 2000); 
     return false; 
    }); 
}); 

我無法弄清楚是如何設置scrollTop的與相應的ID的span之間的合作，在li。我已經將scrollTop線條留在了原始腳本中。

任何幫助，將不勝感激

感謝

Answer 1

這裏的HTML

<ul> 
    <li id="li1">frame 1 - <span id="goto2" class="goto">go to frame 2</span></li> 
    <li id="li2">frame 2 - <span id="goto3" class="goto">go to frame 3</span></li> 
    <li id="li3">frame 3 - <span id="goto4" class="goto">go to frame 4</span></li> 
    <li id="li4">frame 4 - <span id="goto5" class="goto">go to frame 5</span></li> 
    <li id="li5">frame 5 - <span id="goto1" class="goto">go to frame 1</span></li> 
</ul> 
<div id="1">1</div><div id="2">2</div><div id="3">3</div><div id="4">4</div><div id="5">5</div> 

這裏視覺反饋

div{ 
    height:600px; 
    background-color:#aaa; 
    margin-top:20px; 
} 

一點CSS和這裏的固定JS

$(document).ready(function(e) { 
//SCROLL TO ANCHOR TAG 
var $root = $('html, body'); 

    $('.goto').click(function() { 
     var $gotoid = $(this).prop('id'); 
     var $justid = $gotoid.replace('goto',''); 
     console.log($gotoid); 
     console.log($justid); 
     if(typeof $("#"+$justid) != undefined){ // test if target exists 
      $root.animate({ 
       scrollTop: $("#"+$justid).offset().top 
      }, 2000); 
     } 
     return false; 
    }); 
}); 

然後，小提琴

http://jsfiddle.net/DyH8S/

隨意問了解釋相關