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平滑滚动到锚点？

回答

相关问题