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

梅問題-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
[範例預覽]

相關文章

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座