jQuery柔和的滚动

由于我的网站的性质，我经常不得不链接到页面内列出的锚点，而不仅仅是页面本身。一个例子可以在这里找到：http://www.unknowntales.net/chapter/route/choice/#chapter3 jQuery柔和的滚动

我在找的是一些jQuery代码，我可以用它使页面慢慢向下滚动到锚点，而不是直接跳转到它。

任何人都可以帮我吗？谢谢。

来源

2010-08-13 Daniel

假设你的HTML是：

<a href="#someid">click me</a> 
<h1 id="someid">some heading<h1>

这应该工作

$('a').click(function(e) { 
    e.preventDefault(); 
    var targetOffset = $($(this).attr('href')).offset().top; 

    $('html,body').animate({ scrollTop: targetOffset - 100 }, 500); 
});

编辑：利亚姆说什么（见下文评论）

来源

2010-08-13 12:00:20

谢谢你的答案，但它不能正常工作。它适用于链接和锚点位于同一页面的页面，但它可以防止所有链接都工作。另一点需要注意的是，大多数时候，锚点的链接将来自另一个页面，所以它需要能够从网址抓取＃号。谢谢。 – Daniel 2010-08-13 13:14:29

对于第一部分来说，在表示它为“相同页面”的链接中添加一个类，然后使用'$（'a.myclass'）'作为选择器。对于第二部分，我不会那样做。听起来像不好的可用性 – 2010-08-16 09:39:53

使用'$（'a [href^=“＃”]'）'只选择链接到页面上的锚点。 – Liam 2010-09-16 20:55:17

这是我放在一起，而背部。

$('a', this) 
    .each(function(e) { 
     var url = $(this).attr('href').replace(/^\s/, '').replace(/\s$/, ''); 
     var parts = url.split("#", 2); 
     var anchors = $("#" + parts[1] + ", a[name='" + parts[1] + "']"); 
     if (anchors.length > 0) { 
      $(this).click(function(evt) { 
       evt.preventDefault(); 
       $('html, body') 
       .animate({ 
        scrollTop: $(anchors.get(0)).offset().top 
       }, { 
        duration: 1500, 
        specialEasing: { 
         scrollTop: 'easeOutQuint' 
        } 
       }); 
      }); 
     } 
    });

如果我编辑这一次我会取代我的锚与过滤$（ 'A [^ HREF = “＃”]'）Liam的选择。

来源

2011-11-08 08:16:35

jQuery柔和的滚动

回答

相关问题