链接到锚点时滑动/滚动效果

时间:2013-12-08 14:15:57

标签: anchor

我的网站顶部有一个链接,指向我网站中间的对象链接。我已经建立了一个锚链接,因此用户无需滚动。

但我想知道是否可以制作幻灯片/滚动效果,所以当他们点击链接时,它会“慢慢”滚动到该对象。

1 个答案:

答案 0 :(得分:0)

您可以在此处找到答案:http://css-tricks.com/snippets/jquery/smooth-scrolling/

基本上你需要链接你的javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后添加脚本代码:

    <script>
   $(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;
  }
}
 });
});
 </script>