功能上的平滑滾動+偏移goToNext

Question

我想從頂部添加一個偏移量，並平滑滾動到以下功能， 功能位於一個固定的按鈕上，並沿着頁面跟隨用戶。此按鈕必須能夠滾動瀏覽多個錨點，然後返回第一個錨點，理想的偏移距離頂部爲105像素。拖網幾小時尋求幫助，並沒有jquery知道如何解決這個問題，任何幫助？這裏 類似的例子 - http://www.google.com/nexus/7/（按鈕，右下）

<script> 
var max = 6; 

function goToNext() { 
    var hash = String(document.location.hash); 
    if (hash && hash.indexOf(/anchor/)) { 
     var newh = Number(hash.replace("#anchor","")); 
     (newh > max-1) ? newh = 0 : void(null); 
     document.location.hash = "#anchor" + String(newh+1); 
    } else { 
     document.location.hash = "#anchor1";   
    } 
} 

</script> 
<a href="#" onclick="goToNext();return false;"></a> 

<div id="anchor1"></div> 
<div id="anchor2"></div> 
<div id="anchor3"></div> 
<div id="anchor4"></div> 
<div id="anchor5"></div> 
<div id="anchor6"></div> 

Answer 1

你可以把它滾動順利使用animate({scrollTop:value},delay)的元素。

$('document').ready(function() { 
    //on DOM ready change location.hash to 'anchor1' 
    window.location.hash = 'anchor1'; 
    //GO TO NEXT click event: 
    $('a').click(function (e) { 
     //preventing the default <a> click (href="#") 
     e.preventDefault(); 
     //get the current hash to determine the current <div> id 
     var hash = window.location.hash, 
      //find the (next) immediate following sibling of the current <div> 
      $next = $(hash).next('div'); 
     //check if this next <div> sibling exist 
     if ($next.length) { 
      var id = $next.attr('id'), 
       nextOffsetTop = $next.offset().top; 
      //animate scrolling and set the new hash 
      $('body, html').animate({scrollTop: nextOffsetTop}, 'slow'); 
      window.location.hash = id; 
     }else{ 
     //else if the next <div> sibling does not exist move to the first anchor 
      var first = '#anchor1'; 
      $('body, html').animate({scrollTop: $(first).offset().top},'slow'); 
      window.location.hash = first; 
     } 

    }); 
}) 

看到這個jsfiddle。

---

然後是閃爍。其實它不是閃爍，但有點生澀，如果你仔細觀察上面的代碼。我先設置animate(scrollTop)，然後更改散列window.location.hash = id。現在，當動畫開始滾動時，突然我們正在更改散列，它往往直接跳到下一個<div>（這是默認的haschange事件），但被animate()拉回，導致滾動爲生澀。

我們不能停止haschange事件的默認傳播，可能有解決方案，但不能保證它可以在所有瀏覽器上運行，但每個瀏覽器在haschange事件時都有不同的行爲。但是感謝@Andy E提供的SO帖子解決方案，我們不需要停止haschange傳播。我們可以只是簡單地改變哈希值，重新設置爲最後的scrollTop()位置，然後根據需要動畫滾動！

//get the current scrollTop value 
var st = $(window).scrollTop(); 
//change the hash 
window.location.hash = id; 
//reset the scrollTop 
$(window).scrollTop(st); 
//animate scrolling 
$('body, html').animate({scrollTop: nextOffsetTop}, 'slow'); 

檢查此更新jsfiddle。

---

現在讓我們來談談HTML5 History API。我之所以沒有首先介紹這一點，是因爲它在HTML5（特別是IE）瀏覽器中的實現方式不同，並且沒有對HTML4瀏覽器的回退，使得此方法在某種程度上不一致。但是，我可以使用插件來正確完成此操作。

這裏是如何使用history.pushState()做到這一點：

if ($next.length) { 
    var id = $next.attr('id'), 
     nextOffsetTop = $next.offset().top; 

    history.pushState({state:id}, id, '#'+id); 
    $('body, html').animate({scrollTop: nextOffsetTop - 105}, 'slow');  
} 

看到這個jsfiddle。

就是這樣。乾杯!