首先準備類似這樣的html,讓每個block的高度都是100%,保證每個block都會捲動到。
- <div class="block"><a href="#hash1">hash1</a></div>
- <div class="block"><a href="#hash2">hash2</a></div>
- <div class="block"><a href="#hash3">hash3</a></div>
- <div class="block"><a href="#hash4">hash4</a></div>
然後就寫code囉
- var currentHash = "#hash1"
- $(document).scroll(function () {
- $('.block a').each(function () {
- var top = window.pageYOffset;
- var distance = top - $(this).offset().top;
- var hash = $(this).attr('href');
- if (distance < 30 && distance > -30 && currentHash != hash) {
- window.location.hash = (hash);
- currentHash = hash;
- }
- });
- });
參考來源
Change url when manually scrolled to an anchor?
Demo
0 意見:
張貼留言