ScrollTo：定位导航栏中的特定按钮

Question

我为 WordPress 网站创建的导航栏出现问题。有些 links 是为了向下滚动到主页上的不同位置，有些在 links 之外滚动到网站上的其他地方。像这样：

<div class="main-navigation">
    <ul>
        <li class="link1"><a href="page1.html">Link 1</a>
        <li class="link2"><a href="#link2">Link 2</a>
    </ul>
</div>

基本内容。

所以如果我在页脚中添加以下 Javascript....

jQuery(document).ready(function() {

jQuery('.main-navigation a' ).click(function(){
  jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
  return false;
});

Link 2 将向下滚动，但由于 Link 1 不应该滚动，如果您单击它，则不会发生任何事情，就像它是 null link.

我想我可以将引用更改为

jQuery('.main-navigation a.link2' ).click(function(){

所以只有 link 2 会滚动，但这只会让它像 1990 年代的旧锚标记技巧一样跳转到页面。

尝试了同一想法的几种变体，但没有任何效果。谁知道只针对需要滚动的按钮的正确代码是什么？

Answer 1

根据 itsgoingdown 的 回答构建。动画被忽略，因为默认的 link 事件仍然触发。如果您通过该事件并防止默认设置，您将被设置。见下文。

$(document).ready(function() {
    $('.main-navigation a[href^="#"]' ).click(function(event) {

        // Prevent default link action
        event.preventDefault();

        // Grab location to send to
        var href = $(this).attr('href');

        // Scroll the page, animated
        $('html, body').animate({
            scrollTop: $(href).offset().top  
        }, 700);

    });
});

这里还有一个要展示的实时 JSFiddle。 https://jsfiddle.net/y3nutj22/5/

Answer 2

谢谢你们。我终于想通了，从某种意义上说，你们都是对的。但是，您的代码都没有产生 scrollTo 效果。虽然 '.main-navigation a[href^="#"]' 部分正确，但我的问题....今天早上我终于意识到了...我是否在 URL 中进行了硬编码在 WordPress 的菜单功能中作为一个完整的 URL。所以只使用“#”是行不通的。另外，由于是WP，我不能在代码中使用$，当然不能使用jQuery。

这是成功的代码。

 jQuery(document).ready(function() {

jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
  jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
  return false;
});

与 path.to.url 代表实际 URL，当然。

再次感谢！

ScrollTo：定位导航栏中的特定按钮

ScrollTo: targeting specific buttons in a navbar

javascript

jquery

scrollto