Question

在谷歌搜索了一段时间之后，我找到了几种方法来动画到锚点的方式，当两者（锚链接和锚点）在同一页面上时：

$('a[href^=#]').on('click', function(e){
  var href = $(this).attr('href');
  $('html, body').animate({scrollTop:$(href).offset().top},'slow');
  e.preventDefault();
});

但是当我点击其他网站上的锚链接时，我可以解决这个问题。

示例：

index.php 有一个锚链接，如：

<a href="team.php#marketing">marketing team</a>

team.php 有锚：

<h2 id="marketing">our marketing team</h2>

这符合建议，但没有动画......

我在 team.php 中尝试了此代码，但它不起作用

$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌top}, 500);
});

Answer 1

如果您想使用JavaScript向下滚动，只需使用查询字符串并让JavaScript对其进行操作：

<a href="team.php?target=marketing">marketing team</a>

$(document).ready(function(){
    if (window.location.search === "?target=marketing") {
        var target = $("#marketing");
        $('html,body').animate({
            scrollTop: target.offset().top
        }, 500);
    }
});

单击其他站点上的锚链接后，平滑滚动到锚点

1 个答案: