How to place on the page 4 links and 4 blocks with a height of 1000px each. By clicking on the link page must slip to the appropriate block. To solve, use the .scrollTop () method.

1 answer 1

var zTop = 1; $('a').on('click', function(e) { e.preventDefault(); var index = $($(this).attr('href')).index(); var wh = $(window).height(); $('section').each(function() { var $tgt = $(this); var idx = $tgt.index(); $tgt.removeClass(); if (index == idx) { $tgt.stop(true, true).animate({ top: 0 }, 'linear').addClass('active').css({ 'z-index': zTop }); } if (index < idx) { $tgt.stop(true, true).animate({ top: wh }, 'linear').addClass('below'); } if (index > idx) { $tgt.stop(true, true).animate({ top: -wh }, 'linear').addClass('above'); } }); zTop++; }) $('a[href="#a"]').trigger('click'); $(window).on('resize', function() { var wh = $(window).height(); $('article, section').height(wh); $('.active').css({ top: 0 }); $('.above').css({ top: -wh }); $('.below').css({ top: wh }); }).trigger('resize'); 
 *, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } article { position: relative; display: block; width: 100%; height: 400px; overflow: hidden; } section { position: absolute; display: block; width: 100%; top: 400px; height: 400px; text-align: center; } #a { background: gold; } #b { background: magenta; } #c { background: olive; } #d { background: dodgerblue; } h2 { font: 300 4em/2 'Lato', sans-serif; color: #fff; } a { font: 300 1em/2 'Lato', sans-serif; color: #fff; display: inline-block; padding: 1em; text-decoration: none; border-radius: 4px; margin: .5em; } #aa { background: #e6c200; } #aa:hover { background: #f5ce00; } #ba { background: #e600e5; } #ba:hover { background: #f500f5; } #ca { background: #666700; } #ca:hover { background: #767600; } #da { background: #0483ff; } #da:hover { background: #148bff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article> <section id="a"> <h2>A</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> <section id="b"> <h2>B</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> <section id="c"> <h2>C</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> <section id="d"> <h2>D</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> </article>

  • one
    Thank you very much) - Elizaveta Cheptsova
  • one
    @ ElizavetaCheptsova If the answer helped you, mark the answer as correct (there is a tick next to the answer on the left). This simple action will help someone with a similar problem to immediately find the answer in the future =) - alexoander