滚动到:定位导航栏中的特定按钮

ScrollTo: targeting specific buttons in a navbar

本文关键字：按钮 定位 导航 滚动      更新时间：2023-09-26
我

为WordPress网站创建的导航栏有问题。有些链接旨在向下滚动到主页上的不同位置，有些是指向网站上其他地方的外部链接。像这样：

<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;
});
链接

2 将向下滚动，但由于链接 1 不应该滚动，如果您单击它，则不会像空链接一样发生任何事情。

我想我可以将引用更改为类似

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

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

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

从它的答案构建。动画将被忽略，因为默认链接事件仍然触发。如果传递事件并阻止默认值，则将设置。见下文。

$(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/

感谢你们俩。我终于想通了，从某种意义上说，你们都是对的。但是，您的两个代码都没有产生滚动效果。虽然".main-navigation a[href^="#"]"部分正确，但我的问题....今天早上我终于意识到了....我在 WordPress 菜单功能的 URL 中硬编码为完整的 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。

再次感谢！

相关文章：