使用window.location.hash时无法正常平滑滚动

Question

我做平滑滚动。但它工作不正确。它只在您第二次按下时触发，但url中的哈希值会立即更改。

$('nav').click(function(e){
        if(window.location.hash == "#block1") {
            $('html,body').animate({
                scrollTop: ($('#block1').offset().top)
            })
        }
        else if(window.location.hash == "#block2") {
            $('html,body').animate({
                scrollTop: ($('#block2').offset().top)
        })
        }
    })

Answer 1

您应该防止点击事件的默认行为：

$('nav').click(function(e){
    e.preventDefault();
    //continue...

希望这能有所帮助。

编辑：

这应该会奏效：

$('nav').click(function(e){
    e.preventDefault();
    var section = $(this).attr('href');
    if(section == "#block1") {
        window.location.hash = "#block1";
        $('html,body').animate({
            scrollTop: ($('#block1').offset().top)
        });
    }
    else if(section == "#block2") {
        window.location.hash = "#block2";
        $('html,body').animate({
            scrollTop: ($('#block2').offset().top)
        });
    }
});

Valery