0

Can somebody please explain why this won't work? Ideally, when the link at the top is clicked, it should scroll down to my other class. I also don't understand a lot of this code, so a detailed explanation would be great!

$('a.scrollto').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top-25
        }, 500);
        return false;
    });

4

1 回答 1

0

您必须确保每个具有“scrollto”类的锚点都有一个指向类的 HREF（或者更建议使用 ID）。例如：

<a href="#goToThisAnchor" class="scrollto">Scroll to #goToThisAnchor</a>

单击上面的锚点将向下滚动到具有id="goToThisAnchor

//Put's the click event listeners on anchor elements with class name 'scrollto'
$('a.scrollto').click(function(){  
    $('html, body').animate({ //animates the html and body (this makes the scroll effect)
        scrollTop: $( $.attr(this, 'href') ).offset().top-25 //choose which element to scroll to in this case it will choose the element that is specified in the "href" of the anchor clicked. offset().top gives the position offset from the TOP of .your_class_name
    }, 500); //500 is the time in milliseconds it will take to scroll.
    return false; //cancels your anchor from following it's href
});

我实际上建议使用 ID 而不是类名来滚动到，否则 scrollTop 只会滚动到它看到的“类名”的第一个元素。

您希望单击此锚点以向下滚动到#rulesa：

<a href="#rulesa" class="scrollto">Scroll to #rulesa</a>

单击此锚点会将您滚动到具有id="rulesa"的元素。请注意，id 包含在 href 中。

我的道歉，使用以下代码将起作用：

$('a.scrollto').click(function(){
  $('html, body').animate({ 
     scrollTop: $("#rulespng").offset().top-25
  }, 500);
return false;

但是您必须为要滚动到的每个 ID 锚重新创建此功能。这很好，如果您希望所有人都a.scrollto滚动到 1 个锚点：#rulespng

但是，如果您使用原始代码，它将更加灵活：

scrollTop: $( $.attr(this, 'href') ).offset().top-25

您只需要顶部列出的一个函数（您也在原始问题中写过），它适用于所有带有 的锚点$('a.scrollto')，这取决于上面解释的锚点的 href 属性。

于 2013-07-25T13:51:47.800 回答