Question

我遇到了一个问题，即在一个溢出的元素中顺利滚动。第一个链接/锚点按预期工作，但任何后续链接都不会滚动到它们的锚点。

<!doctype html>
<html>
<head>

<style>
#container {width: 400px; height: 400px; background: #ccc; overflow-y: scroll}
div > div {margin-top: 500px; height: 1px; background: red;}
</style>
</head>

<body>
<div id="container">
    <a href="#anchor-a">NEXT</a>
    <div id="anchor-a"></div>
    <a href="#anchor-b">NEXT</a>
    <div id="anchor-b"></div>
    <a href="#anchor-c">NEXT</a>
    <div id="anchor-c"></div>
</div>

<script>
$(function() {
  $('a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('#container').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

</body>
</html>

任何帮助都不仅仅是值得赞赏的。谢谢。

Answer 1

修正脚本：

<script>
$(function() {
  $('a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('#container').animate({
          scrollTop: $('#container').scrollTop() + target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

在元素内平滑滚动，只有第一个链接/锚点工作

1 个答案: