偵測頁面捲動位置並改變網址 hash 的值

最近寫網頁的一個需求，是像Mario這樣，除了視差滾動外，在往下走的過程中，url的hash也會跟著變化。

首先準備類似這樣的html，讓每個block的高度都是100%，保證每個block都會捲動到。

view plaincopy to clipboardprint

1. <div class="block"><a href="#hash1">hash1</a></div>  
2. <div class="block"><a href="#hash2">hash2</a></div>  
3. <div class="block"><a href="#hash3">hash3</a></div>  
4. <div class="block"><a href="#hash4">hash4</a></div>  

然後就寫code囉

view plaincopy to clipboardprint

1. var currentHash = "#hash1"  
2.     $(document).scroll(function () {   
3.         $('.block a').each(function () {   
4.             var top = window.pageYOffset;   
5.             var distance = top - $(this).offset().top;   
6.             var hash = $(this).attr('href');   
7.             if (distance < 30 && distance > -30 && currentHash != hash) {   
8.                 window.location.hash = (hash);   
9.                 currentHash = hash;   
10.             }   
11.         });   
12.     });  

參考來源
Change url when manually scrolled to an anchor?

Demo

反應：