jquery平滑滾動到錨點？

121

下面是我該怎麼做：

var hashTagActive = ""; 
    $(".scroll").on("click touchstart" , function (event) { 
     if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll. 
      event.preventDefault(); 
      //calculate destination place 
      var dest = 0; 
      if ($(this.hash).offset().top > $(document).height() - $(window).height()) { 
       dest = $(document).height() - $(window).height(); 
      } else { 
       dest = $(this.hash).offset().top; 
      } 
      //go to destination 
      $('html,body').animate({ 
       scrollTop: dest 
      }, 2000, 'swing'); 
      hashTagActive = this.hash; 
     } 
    });

然後你只需要創建你的錨是這樣的：

<a class="scroll" href="#destination1">Destination 1</a>

你可以看到它在我的website。
的演示，也可以在這裏找到：http://jsfiddle.net/YtJcL/

來源

2012-10-03 18:40:47 hanoo

+1

非常好＆精益 – efwjames 2012-11-16 09:24:16

+0

太棒了，thx代碼 – 2013-05-31 20:59:16

+3

檢查以查看您可以滾動的最低點有什麼意義？如果您嘗試在最後一個窗口高度下滾動，是否有一些瀏覽器搞砸了？ Chrome似乎並不介意;即設置'scrollTop：veryHighNumber'只是把你帶到頁面的底部。 – Andrew 2013-06-02 05:40:58

12

jQuery.scrollTo將做你想要的一切和更多！

你可以傳遞各種不同的東西：

原始數字
的字符串（'44' ， '100px的'， '+ = 30PX'，等）
一個DOM元素（邏輯上，可滾動元素的子元素）
選擇器，它將相對於可滾動元素
字符串'max'滾動到結尾。
一個字符串，指定滾動到該容器的該部分的百分比（f.e：50％將*移到中間）。
散列{top：x，left：y}，x和y可以是任何類型的數字/字符串，如上所述。

來源

2010-11-16 19:20:45

+0

這是一個插件嗎？因爲我試過了，沒有發生任何事..我用這個： $ .scrollTo（「＃addNewUA」，800，{easing：'elasout'}）; – dynamic 2010-11-16 19:55:59

+3

是的，它是一個插件，所以你需要下載幷包含它。雖然它非常輕巧，功能也非常棒。（注意：我沒有任何個人聯繫，除了在很多網站中使用它） – 2010-11-16 20:03:30

44

我會用從CSS-Tricks.com簡單的代碼片段：

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

來源：http://css-tricks.com/snippets/jquery/smooth-scrolling/

來源

2010-11-16 19:25:52 David

+0

如果您希望所有頁面內錨鏈接都可以滾動生成而不需要任何裝飾等，這可能是更好的解決方案。否則，jQuery.scrollTo有很多很酷的其他技巧（檢查他們的演示頁面） – 2011-12-16 15:57:06

+0

這是一個非常棒的插入式解決方案 – 2015-03-06 04:35:52

+0

原則上 - 使用**代碼**不**鏈接** - http://meta.stackexchange.com/ questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – 2015-08-04 11:35:49

4

這是我用來快速綁定jQuery的scrollTo所有錨鏈接的代碼：

// Smooth scroll 
$('a[href*=#]').click(function() { 
    var hash = $(this).attr('href'); 
    hash = hash.slice(hash.indexOf('#') + 1); 
    $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500); 
    window.location.hash = '#' + hash; 
    return false; 
});

來源

2012-08-22 10:34:14

+1

看起來您可能需要使用jQuery scrollTo插件才能使用此代碼？ – 2014-04-15 06:12:29

34

到目前爲止，我已經看到了

最好的解決辦法： jQuery: Smooth Scrolling Internal Anchor Links

HTML：

<a href="#comments" class="scroll">Scroll to comments</a>

腳本：

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    }); 
});

來源

2013-02-11 03:48:24 aruizca

+2

這確實是最簡單的解決方案，再加上您想要平滑滾動的任何未來鏈接，只需將「滾動」類添加到鏈接即可。 – Duncanmoo 2013-05-25 11:45:40

0

我用我的網站是這樣的：

$(document).ready(function(){ 
$('a[href^="#"]').on('click',function (e) { 
    e.preventDefault(); 

    var target = this.hash, 
    $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 1200, 'swing', function() { 
     window.location.hash = target; 
    }); 
});

}）;

你可以改變滾動的速度，改變我默認使用的「1200」，它在大多數瀏覽器上工作得很好。

把你的頁面的<head> </head>標籤之間的代碼之後，您需要在您的<body>標籤來創建內部鏈接：

<a href="#home">Go to Home</a>

希望它能幫助！

PS：不要忘記調用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

來源

2013-09-06 19:55:01

0

我使用的插件平滑滾動，在http://plugins.jquery.com/smooth-scroll/。有了這個插件，所有你需要包括一個鏈接到jQuery和到插件代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="javascript/smoothscroll.js"></script>

（鏈接需要有類smoothScroll工作）。

Smooth Scroll的另一個功能是，ancor名稱不顯示在URL中！

來源

2013-10-15 08:32:16 Zoweb

1

使用hanoo's script我創建了一個jQuery函數：

$.fn.scrollIntoView = function(duration, easing) { 
    var dest = 0; 
    if (this.offset().top > $(document).height() - $(window).height()) { 
     dest = $(document).height() - $(window).height(); 
    } else { 
     dest = this.offset().top; 
    } 
    $('html,body').animate({ 
     scrollTop: dest 
    }, duration, easing); 
    return this; 
};

用法：

$('#myelement').scrollIntoView();

默認的持續時間和寬鬆的400ms的時間「搖擺」。

來源

2014-03-23 03:17:43 mpen

0

工作

$('a[href*=#]').each(function() { 
    $(this).attr('href', $(this).attr('href').replace('#', '#_')); 
    $(this).on("click", function() { 

     var hashname = $(this).attr('href').replace('#_', ''); 

     if($(this).attr('href') == "#_") { 
      $('html, body').animate({ scrollTop: 0 }, 300); 
     } 
     else { 
      var target = $('a[name="' + hashname + '"], #' + hashname), 
       targetOffset = target.offset().top; 
      if(targetOffset >= 1) { 
       $('html, body').animate({ scrollTop: targetOffset-60 }, 300); 
      } 
     } 
    }); 
});

來源

2014-06-06 15:47:14 user3715723

0

我討厭添加功能，命名類我的代碼，所以我把這個在一起而不是。如果我停止使用平滑滾動，我會覺得有必要通過我的代碼，並刪除所有class =「scroll」的東西。使用這種技術，我可以註釋掉5行JS，並且整個網站都會更新。 :)

<a href="/about">Smooth</a><!-- will never trigger the function --> 
<a href="#contact">Smooth</a><!-- but he will --> 
... 
... 
<div id="contact">...</div> 


<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    // Smooth scrolling to element IDs 
    $('a[href^=#]:not([href=#])').on('click', function() { 
     var element = $($(this).attr('href')); 
     $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing'); 
     return false; 
    }); 
</script>

要求：
1. <a>元素必須具有與#開始href屬性，並不僅僅是#
2.頁面上的元素與匹配id屬性

它做什麼：
1.該函數使用href值創建對象anchorID
- 在該示例中，這是$('#contact')，開始於/
2. HTML，和BODY是動畫頂端的anchorID
偏移 - 速度= '正常'（ '快'，「慢'，毫秒）
- easing ='swing'（'linear'等... google easing）
3。return false - 它可以防止瀏覽器在URL中顯示哈希值
- 該腳本沒有它，但它不是「平滑」。

來源

2014-06-28 22:40:28 Dawson

2

試試這個。這是我修改的CSS技巧代碼，它非常簡單直接，並且可以進行水平和垂直滾動。需要JQuery。這裏是一個demo

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top-10, scrollLeft:target.offset().left-10 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

來源

2014-09-12 21:38:48

3

我想，對於<a href="#my-id">工作和版本<a href="/page#my-id">

<script>   
    $('a[href*=#]:not([href=#])').on('click', function (event) { 
     event.preventDefault(); 
     var element = $(this.hash); 
     $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing'); 
    }); 
</script>

來源

2015-07-07 19:29:36 Justin

jquery平滑滾動到錨點？

回答

相關問題