Question

我正在设计一个个人网站的问题。我希望列表项能够在按下后滚动到所需位置。我以前一直在使用这个，但我不确定是否更好地使用JS这个或锚。我在JavaScript中非常不熟练，但我无法弄清楚如何让锚点调用JS卷轴方法。这就是我到目前为止所做的：

<!doctype HTML>
<html>
  <head>
    <title>Jackson Singleton</title>
    <link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">

    <div id="heading">
      <h1><a href="index.html">jackson<span id ="lastName">singleton</span></a></h1>
    </div>
    <div class="navBar">
      <ul id="navList">
        <li id="home">home</li>
        <li id="port"><a href>portfolio</a></li>
        <li id="inqr"><a href>inquiries</a></li>
      </ul>
    </div>
    </div>
  </head>
  <br  />
  <body>
    <script src="JavaScript/script.js"></script>
    <div class="bodyPanel" id="portBody">
      <h1 id="portHeading">portfolio</h1>
    </div>
    <div class="bodyPanel" id="inqrBody">

    </div>
  </body>
</html>

和JS：

var portLink = document.getElementById('port');
portLink.onclick=function(){
  document.getElementById('portHeading').scrollIntoView();
}

请帮忙！

Answer 1

首先将锚标记链接到页面的某个部分，您需要为该部分中的元素指定ID，例如id="part1"然后在您的锚标记的href中，您会说href="#part1"。这将执行即时滚动到页面上具有id part1的元素的任何位置。

为了顺利滚动，jQuery是您的最佳选择。阅读本页的内容，了解如何在即时滚动中进行平滑滚动，他们有关于如何执行此操作的演示和源代码。

https://css-tricks.com/snippets/jquery/smooth-scrolling/

在没有按钮的情况下遇到Javascript滚动条问题

1 个答案: