jQuery的平滑頁錨轉變與位置：固定的菜單

Question

我使用了一個位置：在http://communitychessclub.com/index.php固定的菜單，以保持屏幕上的菜單，甚至當用戶滾動：

CSS：

#sticky {margin:0 auto; display:table} 
#sticky.stick {position: fixed; top: 0; margin-left:48px; z-index: 10000; } 

JS：

<script> 
function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) 
     $('#sticky').addClass('stick') 
    else 
     $('#sticky').removeClass('stick'); 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 

$(window).scroll((function() { 
    var a='', // a buffer to the hash 
    w = $(window); 
    return function() { 
     var h = location.hash; 
     // if hash is different from the previous one, which indicates 
     // the hash changed by user, then scroll the window down 
     // update the buffer 
     if (h != a) {    
      a = h;   
      w.scrollTop(w.scrollTop()-150) 
     } 
    }; 
})()); 
</script> 

但人們抱怨說，鏈接到同一頁上的ID導致屏幕突然滾動。所以我在http://www.spydertrap.com/blog/2012/08/user-experience-jquery-smooth-page-anchor-transitions/上發現了「通過jQuery平滑頁面錨點轉換提高用戶體驗」，並且很喜歡這個演示。非常喜歡它，我想將下面的jquery代碼與上面的jquery代碼混合起來，形成一個平滑的jquery滾動條。

他們使用（但其他版本的存在這裏...問題是如何加入二）

jQuery代碼：

function goToByScroll(id){ 
    $('html,body').animate({scrollTop: $(id).offset().top},'slow'); 
} 

HTML：

<ul class="nav"> 
    <li><a href="#chapter1">Chapter 1</a></li> 
    <li><a href="#chapter2">Chapter 2</a></li> 
    <li><a href="#chapter3">Chapter 3</a></li> 
</ul> 

JS啓動：

$(document).ready(function(){ 
    $('.nav a').click(function(){ 
     goToByScroll($(this).attr('href')); 
     return false; 
    }); 
}); 

這可能與上面的jQuery代碼聯合起來嗎？

Answer 1

我剛剛通過Chrome瀏覽器的JS控制檯在您的頁面上進行了黑客行爲。我添加了功能goToByScroll逐字然後執行此：

$('#sticky a').click(function(){ 
    goToByScroll($(this).attr('href')); 
    return false; 
}); 

果然，它錨ID之間滾動。當您點擊導航欄中並非實際錨定鏈接的鏈接（例如'Home'指向主頁，'Chess Camp'打開彈出框）時，會出現一個小問題。所以你可以添加一個類到你想要滾動的錨鏈接，然後將該類添加到選擇器。

例如，修改你的標記爲粘菜單欄，看起來像這樣：

<li><a href="http://www.chessset.com/">Chess Center</a> 
    <div><ul> 

     <li><a class="anchor" href="#cc_events">about the RCC</a></li> 

     <li><a href="#" onclick="TINY.box.show({url:'RCC_chess_lessons.php',boxid:'RCC_chess_camp', width:950, height:650}); return false;">chess camp</a></li> 

     <li><a href="#" onclick="TINY.box.show({url:'RCC_Marchand_Open.php',boxid:'RCC_marchand', width:1000,height:600}); return false;">Marchand Open</a></li> 

     <li><a href="#" onclick="TINY.box.show({url:'RCC_weekly_schedule.php', boxid:'RCC_schedule', width:775, height:600}); return false;">weekly schedule</a></li> 

     <li><a class="anchor" href="#picnic">annual picnic</a></li> 

     <li><a href="http://www.chessset.com/">Chess gear sale</a></li> 

    </ul></div> 
</li> 

（添加class="anchor"到所有指向散列在同一個頁面上的鏈接）

而且將此添加到您的javascript：

// sticky_relocate function here 

// Add this function exactly from your example 
function goToByScroll(id){ 
    $('html,body').animate({scrollTop: $(id).offset().top},'slow'); 
} 

// modify your onReady jQuery handler to this: 
$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 

    // Added the .anchor to the selector 
    $('#sticky a.anchor').click(function(){ 
     goToByScroll($(this).attr('href')); 
     return false; 
    }); 
}); 

// your $(window).scroll goes here 

這應該適用於您而不會引發任何錯誤。