Скролл к нужному блоку после перехода на страницу

220

25 октября 2017, 04:20

Вопрос в следующем. Есть простая html страница на ней ссылка, после клика должна открыться следующая страница и до скролиться до нужного места. Я думал что должна сработать такая конструкция href="link/#id" Но не работает(

Answer 1

* { 
  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>

Answer 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>