Bootstrap內建許多互動的網頁特效，其中滾動頁籤也是一個相當實用的功能，由其是在單一頁面時，呈現商品的資訊、特色、規格…等，當使用者滾動畫面到指定的區域範圍時，上方的導覽列，立即就會顯示目前的所在位置，有點像是網站麵包屑的概念，同時再搭配jQuery套件的scrollto，就可實現點撃滾動畫面的特效。
而在上次的講座中，有學員問到，是否能滾到某區域範圍時，除了導覽列會亮起來外，再來就是網址列也會更著一起變動，如此一來將有助於SEO，而這在很早之前，梅干曾幫朋友製作過，結果竟然忘了分享，因此梅干就花了點時間，整理了一下範例，讓在滾動畫面時，網址列會隨著區域範圍，立即的改變網址，因此有需要的朋友，也一塊來看看囉!
Step1
首先，將連結的#要區塊名稱一樣，其實就是網頁錨點的概念，當點了連結後，就會自動跳到指定的區塊中。
Step2
接著把下方的script語法，放到jQuery套件的下方。
$(document).bind(‘scroll’,function(e){
$(‘section’).each(function(){
var offset = 50;
if ($(this).offset().top < window.pageYOffset + offset && $(this).offset().top + $(this).height() > window.pageYOffset + offset) {
history.pushState(null, null, ‘#’ + $(this).attr(‘id’));
}
});
});
Step3
這時無論是滾動頁面，還是點選連結，當到指定的區塊中時，上方的網址就自動變換啦!
[範例預覽]