Javascript, 網頁設計

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

梅干2016/12/09
梅問題-jQuery教學-Bootstrap滾動頁籤加入hash動態變更網址,更有助於SEO
  Bootstrap內建許多互動的網頁特效,其中滾動頁籤也是一個相當實用的功能,由其是在單一頁面時,呈現商品的資訊、特色、規格...等,當使用者滾動畫面到指定的區域範圍時,上方的導覽列,立即就會顯示目前的所在位置,有點像是網站麵包屑的概念,同時再搭配jQuery套件的scrollto,就可實現點撃滾動畫面的特效。
  而在上次的講座中,有學員問到,是否能滾到某區域範圍時,除了導覽列會亮起來外,再來就是網址列也會更著一起變動,如此一來將有助於SEO,而這在很早之前,梅干曾幫朋友製作過,結果竟然忘了分享,因此梅干就花了點時間,整理了一下範例,讓在滾動畫面時,網址列會隨著區域範圍,立即的改變網址,因此有需要的朋友,也一塊來看看囉!
Step1
首先,將連結的#要區塊名稱一樣,其實就是網頁錨點的概念,當點了連結後,就會自動跳到指定的區塊中。
梅問題-jQuery教學-Bootstrap滾動頁籤加入hash動態變更網址
,更有助於SEO
Step2
接著再把下方的語法,放在script中。
$(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
這時無論是滾動頁面,還是點選連結,到指定的區塊中時,上方的網址就自動變換啦!
梅問題-jQuery教學-Bootstrap滾動頁籤加入hash動態變更網址
,更有助於SEO
[範例預覽]
UAG軍規iPhone防摔殼