文章/答案/技术大牛

发布

社区首页 >问答首页 >滚动到锚定JS不工作

问滚动到锚定JS不工作
EN

Stack Overflow用户

提问于 2017-04-02 21:30:48

回答 1查看 51关注 0票数 1

所以，我想要实现的是，正如标题所说的。到目前为止，我已经经历了相当多的线程和网站，但只是无法使它发挥作用。

我可以看到不同的脚本工作时，他们有时间滚动可编辑。它只是不顺利滚动，它跳到锚后。

我目前正在使用的是：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var hashTagActive = "";
    $(".scroll").click(function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $('html,body').animate({
                scrollTop: dest
            }, 2000, 'swing', function(){
                hashTagActive = "";
            });
            hashTagActive = this.hash;
        }
    });
});
</script>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
    <ul>
        <li><a href="#1">Tervetuloa</a></li>
        <li><a href="#2">Sivupohjia</a></li>
        <li><a href="#3">Tilaa sivut</a></li>
        <li><a href="etusivu.html#4">Linkki</a></li>
        <li><a href="etusivu.html#5">Linkki</a></li>
        <li><a href="etusivu.html#6">Linkki</a></li>
        <li><a href="etusivu.html#7">Linkki</a></li>
        <li><a href="etusivu.html#8">Linkki</a></li>
        <li><a href="etusivu.html#9">Linkki</a></li>
        <li><a href="etusivu.html#10">Linkki</a></li>
    </ul>
</div>
    <div class="container">
        <div class="wrapper">
        <div class="content_primary">
            <a name="1" id="1"></a>
            <h3>Tervetuloa</h3>
            <p>Tekstiä</p>
        </div>
        </div>
        <div class="wrapper">
        <div class="content_secondary">
            <a name="2" id="2"></a>
            <h3>Sivupohjia</h3>
            <p>Tulossa</p>
        </div>
        </div>
        <div class="wrapper">
            <div class="content_primary">
            <a name="3" id="3"></a>
            <h3>Tilaa</h3>
            <p>Tekstiä</p>
        </div>
        </div>
    </div>
    <div class="footer">
        <p>&copy;&nbsp;Marko&nbsp;Ahola</p>
    </div>
</body>
</html>

我只是不知道从这里往哪里走。我没有这方面的经验，我只是个业余爱好者。任何帮助都是非常感谢的。

我有一个Raspberry PI和Apache2网站运行。

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-02 22:02:05

您忘记将类名scroll添加到您希望平滑滚动的前三个锚标记中。

  <li><a href="#1" class="scroll">Tervetuloa</a></li>
    <li><a href="#2" class="scroll">Sivupohjia</a></li>
    <li><a href="#3" class="scroll">Tilaa sivut</a></li>

下面的片段

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var hashTagActive = "";
      $(".scroll").click(function(event) {
        if (hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
          event.preventDefault();
          //calculate destination place
          var dest = 0;
          if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
          } else {
            dest = $(this.hash).offset().top;
          }
          //go to destination
          $('html,body').animate({
            scrollTop: dest
          }, 2000, 'swing', function() {
            hashTagActive = "";
          });
          hashTagActive = this.hash;
        }
      });
    });
  </script>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navbar">
    <ul>
      <li><a href="#1" class="scroll">Tervetuloa</a></li>
      <li><a href="#2" class="scroll">Sivupohjia</a></li>
      <li><a href="#3" class="scroll">Tilaa sivut</a></li>
      <li><a href="etusivu.html#4">Linkki</a></li>
      <li><a href="etusivu.html#5">Linkki</a></li>
      <li><a href="etusivu.html#6">Linkki</a></li>
      <li><a href="etusivu.html#7">Linkki</a></li>
      <li><a href="etusivu.html#8">Linkki</a></li>
      <li><a href="etusivu.html#9">Linkki</a></li>
      <li><a href="etusivu.html#10">Linkki</a></li>
    </ul>
  </div>
  <div class="container">
    <div class="wrapper">
      <div class="content_primary">
        <a name="1" id="1"></a>
        <h3>Tervetuloa</h3>
        <p>Tekstiä</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="content_secondary">
        <a name="2" id="2"></a>
        <h3>Sivupohjia</h3>
        <p>Tulossa</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="content_primary">
        <a name="3" id="3"></a>
        <h3>Tilaa</h3>
        <p>Tekstiä</p>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>&copy;&nbsp;Marko&nbsp;Ahola</p>
  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43173749

复制

相似问题

问滚动到锚定JS不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到锚定JS不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到锚定JS不工作
EN