Question

所以我有一个单页网站，其菜单点在点击时滚动到div。到目前为止这是有效的。我实现了一个jquery函数，它应该给整个事件一个动画但不知何故它不起作用。

这是HTML：

  <div class="mainmenu">
        <div class="menuwrapper">
            <div class="menulist">
                <ul class="items">
                    <li class="menuitem">
                        <a href="#home">HOME</a>
                    </li>
                    <li class="menuitem">
                        <a href="#team">TEAM</a>
                    </li>
                    <li class="menuitem">
                        <a href="#leistungen">LEISTUNGEN</a>
                    </li>
                    <li class="menuitem">
                        <a href="#know-how">KNOW-HOW</a>
                    </li>
                    <li class="menuitem">
                        <a href="#contact">KONTAKT</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

这是js：

$(document).ready(function(){
$('a').click(function(){
        $('html, body').animate({
            scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
        }, 500, "swing");
        return false;
    });

    $(window).resize(function(){
        sliderResize();
    });
});

有人有想法吗？

Answer 1

问题在于，当点击<a>标记时，它仍会执行<a>标记的操作...将您带到链接（在本例中为锚标记）。

要避免默认链接操作，您需要添加代码以防止它：

$('a').click(function(e){
    e.preventDefault(); // This will stop the default jump to anchor

    // Now you can add your smooth scroll animation

阅读preventDefault() documentation了解更多信息。

菜单滚动到div没有动画

1 个答案: