Question

在我的主页上，我有一个带有ID的菜单，当我点击它时，它会滑动到相应的div，它可以实现平滑。

但是当我不在我的主页上并点击某个项目时，我希望能够转到主页，然后滑到该部分。

以下是我现在使用的代码：

$('#mainMenu a').click(function(e){
    e.preventDefault();
    var div = $(this).attr('href');
    if('<?=get_site_url()?>/' == '<?=get_permalink()?>')
    {
        $('html, body').animate({scrollTop:$(div).position().top}, 'slow');
    }
    else
    {
        window.location.href = '<?=get_site_url()?>/'+div;
    }
});

这很好用，下一部分适用但我无法将其滑入ID。

if (window.location.hash != "") {
    e.preventDefault();
    $('html, body').animate({scrollTop:$(window.location.hash).position().top}, 'slow');
}

有没有办法阻止浏览器直接跳转到该部分，而是滑向它？

Answer 1

尝试在开始时滚动到右上角，然后向下滚动：

if (window.location.hash != "") {
    $('html, body').scrollTop(0).animate({scrollTop:$(window.location.hash).position().top}, 'slow');
}

此外，删除e.preventDefault（），因为您没有定义任何名为e的变量，也没有定义event。

Answer 2

这就像一个魅力：

$('#mainMenu a').click(function(e){
    e.preventDefault();
    var div = $(this).attr('href');
    if('<?=get_site_url()?>/' == '<?=get_permalink()?>')
    {
        $('html, body').animate({scrollTop:$(div).position().top}, 'slow');
    }
    else
    {
        localStorage.setItem("hash", div);
        window.location.href = '<?=get_site_url()?>/';
    }
});

if (localStorage.getItem("hash")!=null) {
    $('html, body').animate({scrollTop:$(localStorage.getItem("hash")).position().top}, 'slow');
    localStorage.removeItem("hash");
}

我没有将哈希值放在我的网址中，而是将其存储在localStorage中，在页面的头部，我检查了它是否已设置。

在发布问题后几分钟就建立了这个解决方案，感谢那些帮助过我的人：）

在URL中缓慢导航到id

2 个答案: