主页 / 问题 / 734997
Accepted
pridan
Asked:2020-10-24 12:39:45 +0000 UTC2020-10-24 12:39:45 +0000 UTC

转到页面后滚动到所需的块

  • 772

问题如下。上面有一个带有链接的简单html页面，点击后，下一页应该打开并滚动到正确的位置。我认为这样的构造 href="link/#id" 应该可以工作，但它不起作用（

javascript

2 个回答

  1. Best Answer

    * {
  padding: 0;
  margin: 0;
}

p {
  width: 200px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="D:\test\style\main.css">
  <script src="D:\test\js\adaptiveMenu.js" defer></script>
</head>

<body>
  <div id="testwrap">
    <div id="test">
      <a href="D:\test\test.html#aa">sss</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae omnis ad fuga itaque, voluptate eum ab cum! Veniam excepturi suscipit distinctio porro in illo incidunt autem deleniti dicta. Soluta iste numquam accusamus animi, facilis dolorem iusto
        cupiditate velit! Autem excepturi assumenda a veritatis aspernatur consectetur repellat repudiandae, atque non doloribus!</p>
      <p>Provident dignissimos eius fugiat repudiandae enim vitae, similique consectetur incidunt quo quas optio tempore illo saepe molestiae minus eum explicabo harum nulla? Porro, magni esse ullam omnis vitae fugit atque nesciunt quas voluptates repellendus
        et saepe blanditiis expedita perferendis, accusantium nulla, deserunt commodi soluta iste aperiam quae sunt voluptatum. Omnis!</p>
      <p>Deleniti molestias sit tenetur, eveniet adipisci deserunt dolor, nisi. Quod, aperiam fuga ab dolore impedit, iure. Beatae ipsa, assumenda sunt voluptas sapiente eveniet. Dolores mollitia officiis perferendis nobis nulla ea, id dolore, voluptatibus
        velit commodi minima, magni? Adipisci minima optio eos dolorem pariatur quos rem, consequuntur! Veritatis debitis doloribus, dolorum.</p>
      <p>Aliquam nemo nam dicta, sunt perferendis delectus cupiditate, numquam nobis incidunt sint quidem ad quisquam tempora minima non harum deserunt, quibusdam officiis in molestiae minus a rem dolores. Distinctio eos voluptates nostrum officiis iure
        quam reiciendis quas maiores quibusdam, eligendi unde ut placeat, officia tempora, tempore perspiciatis aliquid. Harum, aliquam.</p>
      <p>Facere velit nesciunt tempora assumenda mollitia voluptatibus alias, ducimus dicta fugit non sint modi sequi enim dolores porro magnam provident iure necessitatibus ratione magni? Perspiciatis ea porro, id in iusto labore numquam amet beatae iste
        temporibus excepturi repudiandae ipsa sint dignissimos veritatis, praesentium aperiam dolore quis placeat voluptate molestiae! Possimus!</p>
      <p>Dignissimos placeat, perspiciatis. Blanditiis reprehenderit velit consequatur veritatis sint, dolorem alias explicabo ipsa suscipit dignissimos, perspiciatis mollitia at asperiores rem numquam dolorum nam eum, enim delectus. Nihil iste quo voluptas,
        debitis nobis at facere deleniti error soluta distinctio, rem illum minima ex, deserunt aperiam reprehenderit assumenda expedita vero aliquam. Iure.</p>
      <p>Rerum qui dolor autem perspiciatis fugit quod provident porro deserunt. Laboriosam dolore, perferendis facilis eligendi esse optio quos totam eos quisquam. Veritatis et, voluptatem dolores fugit cum dolor pariatur debitis quo deleniti optio. Debitis
        optio, fuga facere distinctio in similique dolor earum sint laudantium, repudiandae, iste maxime exercitationem tenetur qui!</p>
      <p>Cumque praesentium, nostrum laboriosam doloremque! Eveniet omnis facere expedita rerum voluptatum incidunt ullam, nam qui. Esse laborum, perspiciatis dolor ipsam inventore consequatur vero dolorum, molestiae ipsum autem praesentium est ea quaerat
        sequi odit incidunt neque placeat modi illo aliquam aspernatur adipisci laboriosam ab, tenetur voluptate. Et illum est, ipsam nostrum.</p>
      <p>Voluptate inventore id doloribus perferendis molestiae quis tempore, temporibus consectetur, assumenda, hic optio dicta quo quasi expedita et saepe sint ab impedit error fugiat, consequatur rem debitis. Harum voluptate ad, enim praesentium, dolores
        asperiores officia voluptatibus reiciendis vero voluptatem cupiditate? Magnam magni, perspiciatis impedit voluptatum delectus iusto debitis esse culpa.</p>
      <p><a name="aa">ss</a>Illum nulla doloribus similique unde recusandae asperiores atque suscipit dignissimos corporis, repellat architecto tenetur nobis cumque maiores, illo labore. Illo sapiente, necessitatibus culpa commodi doloribus corporis! Explicabo
        provident facere magni recusandae maiores rerum quos doloribus quam officiis libero quaerat porro illo laborum, voluptatem exercitationem similique voluptate nisi labore? Earum, repudiandae!</p>
    </div>
  </div>
</body>

</html>

    • 1

  2. 并且在您要引用的文档中，创建了具有相应 ID 的标签？例如，一个 id 为 5 “ id="5" ” 的链接，如果它非常粗鲁，那么：

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <a href="test.html#5">5</a>
    1<br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    2<br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    3<br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    4<br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <div id="5">5<br></div>
</body>
</html>
    • 0

相关问题