Question

我有一个链接：

<a href="#cat2" class="scrollto">Cat 2</a>

和一个锚：

<a name="cat2"></a>

这是我的js

      $(document).ready(function () {
          $('.scrollto').click(function () {
              var aTag = $(this).attr('href');
              $('html,body').animate({
                  scrollTop: aTag.offset().top
              }, 600);
              return false;
          });
      });

有人可以帮我解决这个问题吗？

Answer 1

这不会工作scrollTop: aTag.offset().top因为“aTag”不是jquery，你必须用$()包装变量：像这样：$(aTag).offset().top

然后将name="cat2"替换为id="cat2"

HTML：

<a href="#cat2" class="scrollto">Cat 2</a>

<a id="cat2"></a>

jQuery的：

 $(document).ready(function () {
          $('.scrollto').click(function () {
              var aTag = $(this).attr('href');
              $('html,body').animate({
                  scrollTop: $(aTag).offset().top
              }, 600);
              return false;
          });
 });

jsFiddle：http://jsfiddle.net/rtXjd/

Answer 2

更改

<a name="cat2"></a>

到

<a id="cat2"></a>

和jQuery＆gt;

$('#cat2').click(function(e){

        e.preventDefault();

        $('html, body').animate({

            scrollTop: $($(this).attr('href')).offset().top
        }, 500);
        return false;
    });

<强>更新

Answer 3

<强> HTML ：

  <a href="#cat2" rel="cat2" class="scrollto">Cat 2</a> <!--Add a rel attribute-->

  <a id="cat2"></a>

<强>的jQuery ：

 $(function () {
       $('.scrollto').click(function () {
          var aTag = document.getElementById(this.rel);
                     //I used Vanilla JS with rel tag as to get the ID correctly
          $('html,body').animate({
              scrollTop: aTag.offsetTop //then use Vanilla to get the offsetTop
          }, 600);
         //if JavaScript is turned off the link will still 
         //snap to the correct area
         //also this method doesn't add the #cat2 to the url causing history
         //issues
         return false;
      });  
  });

测试版 http://jsbin.com/pohamesu/5

注意

为什么在jQuery中使用Vanilla JavaScript？这将有助于降低我们的代码权重，Vanilla JavaScript为document.getElementById之类的选择器提供了简单的方法，另一种方法可以获得偏移aTag.offsetTop为什么使用jQuery来实现这些小方法。仅将jQuery用于可能有助于交叉兼容的主要内容。 Doc Loads，Selectors（类和元素以及CSS3选择器），如果您知道如何编写这两种语言，我们也不应该使用许多jQuery方法。是的jQuery是一个库，虽然它变成了自己的语言，因为它与它的前身不同。

Answer 4

您的初始代码无法正常工作的原因是因为您基本上是在尝试获取字符串的偏移量（在本例中为href）。 jQuery期待一个对象。可以在此处详细了解选择器：https://api.jquery.com/category/selectors/

您可以在不更改HTML结构的情况下执行此操作。为此，请更新：

scrollTop: aTag.offset().top

要：

scrollTop: $("[name="+aTag.split('#')[1]+"]").offset().top

虽然使用ID可能会更容易，因为您不需要从字符串中删除＃或使用选择器的属性。

滚动到锚点不会滚动平滑

4 个答案: