Javascript 更改哈希并设置滚动到元素的动画

我在同一页上有一个链接和一个元素：

<a href="#about-us" id="link">Click</a>

<div id="#about-us"></div>

这应该可以动画化一个滚动到#about us元素的动画，但是它没有，它直接转到元素而没有动画，可能是因为没有满足散列条件，尽管url中有一个散列，因为散列在函数之后发生了更改

我需要一种方法来自动滚动到动画元素，当你点击链接。例如，如果这个页面是index.php，并且您想从另一个page.php转到index.php，直接转到该元素，它应该加载页面，然后滚动到该元素，如果您在index.php上，则相同，但在页面顶部，单击链接，它应该向下滚动到该元素

唯一的问题是当你在同一个页面上时。它没有通过条件，所以动画不起作用

更新我对代码做了一点更改。现在条件满足，但动画不起作用

$('#link').click(function(e) {
    window.location.href='index.php#about-us';
    var scrollto = window.location.hash;
    if (window.location.hash != null && window.location.hash != '') {
        alert(scrollto);
        $('html, body').animate({
            scrollTop: $(scrollto).offset().top
        }, 500);
    }
});

---

这是因为当您单击链接并调用事件处理程序时，不会定义

window.location.hash

尝试使用：

jQuery(function($) {
    $('#link').on('click', function(e) {
        e.preventDefault();
        var scrollTo = $(this).attr('href'); // retrieve the hash using .attr()

        if (scrollTo != null && scrollTo != '') {
            $('html, body').animate({
                scrollTop: $(scrollTo).offset().top
            }, 500);
        }
    });
});

另外，使用以下命令更改HTML代码：

<div id="about-us"></div> <!-- no need for prepending id value with # -->

并使用

var scrollTo=window.location.hash检索位置散列将在页面加载时定义。
此代码适用于我

用于同一页面滚动的HTML

<a href="#about-us" class="link">Click for About us</a>

<div id="about-us"></div>

<div id="introduction"></div>

您需要先阻止默认事件，然后再进行动画制作。尝试向JavaScript添加一个
窗口。onhashchange
事件处理程序，并将条件放入
onhashchange
函数体？检查我的更新，这是我需要开始的代码，但如果我要滚动到的元素不在此页面上，我必须添加a href=“index.php#about us”，因此当页面加载时，它应该直接进入元素，带有动画，我认为这不会与您的脚本一起工作检查我的更新，这是我需要开始的代码
<a href="#about-us" class="link">Click for About us</a>

<div id="about-us"></div>

<a href="product.html#introduction">Click for product introduction</a>

<div id="introduction"></div>

if(window.location.hash){
    var getUrlAfterHash = window.location.hash;
    if($(getUrlAfterHash).length > 0){
        $('html, body').animate({ scrollTop : 0 });
        scrollToTop();
    }
}

$('.link').on('click', function(e){
    e.preventDefault();
    var getUrlAfterHash = $(this).attr('href');
    scrollToTop();
 });

function scrollToTop(){
    var idPositionHeight = $(getUrlAfterHash).offset();
    $('html, body').animate({ scrollTop : idPositionHeight.top}, 800);
}