我的平滑滚动 js 不会触发动画？

Question

我没有得到这个，页面只是跳转到 id 而不是动画。 也没有显示警报“点击”？

<script>
jQuery(document).ready(function($) {
   alert('start');
    $('ul#menu-sde-menu li a[href^="#"]').on('click', function(event) {
        alert("click");
        var target = $(this.getAttribute('href'));

        if (target.length) {
            event.preventDefault();
            $('html, body').stop().animate({
                scrollTop: target.offset().top
            }, 1000);
        }

    });
});

还有一个简单的菜单

<ul id="menu-sde-menu"><li><a href="http://localhost/testdomain/sde/#link1">link 1</a></li><li><a href="http://localhost/testdomain/sde/#link2">link 2</a></li></ul>

我尝试使用 https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2

Answer 1

不要使用绝对路径http://localhost/testdomain/sde/#link2

简单地说：

href="#link2"

（如果您仍然打算保持在同一页面上，逻辑上。）

您正在使用a[href^="#"] - 这意味着获取具有href 属性的元素，该属性以 ^= 和# 开头，而http:// 显然不是一个。