Hello. I can not understand what the problem is. There are anchors on the page linked to links:

<aside class="left-content"> <div class="nav"> <ul> <li><a href="#treby" class="treby">Православные требы</a></li> <li><a href="#moleben" class="moleben">Молебен</a></li> <li><a href="#sorokoust" class="sorokoust">Сорокоуст</a></li> <li><a href="#svecha" class="svecha">Свеча</a></li> <li><a href="#pozhertvovanie" class="pozhertvovanie">Пожертвование</a></li> </ul> </div>

The script hides articles, except the selected one and scrolls to id:

 $(".nav").on("click","a", function (event) { event.preventDefault(); var id = $(this).attr('href'); var top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 1500); $('.content').hide(); $('.content.' + this.className).show(); });

Html markup:

 <div id="svecha"></div> <div class="content svecha" style=""> <div class="sec" id="article-89"> <div class="title">Свеча</div> <div class="sec" id="to_print"><div class="timage-svecha"><img alt="Свеча" src="/static/images/svecha.jpg" style="height:211px;width:281px" title="Свеча"></div> <p> ... </p> </div> </div>

The problem is that when you click on the links on the page, it scrolls away to the footer, then to the middle of the content. Once can work normally. when re-moving go down. A must scroll to

 <div id="svecha"></div>
  • You must first manipulate the hide/show elements with hiding and display, and only then calculate the position of the target element top = $(id).offset().top and actually start the animation $('body,html').animate({scrollTop: top}, 1500) - Konstantin Basharkevich
  • one
    Thank you, Konstantin. Unfortunately, I can not mark your answer, as written in the form of a comment. - Coveraver
  • not for that, but do not worry about scores, I did not suggest them for the sake of them;) - Konstantin Basharkevich

1 answer 1

I suppose the point is that you first scroll and then hide the blocks.

Judge for yourself: you said "scroll to a height of 1000px" (it is at such a height that you have the necessary block). The script calculated everything and started the process of gradual page offset, lasting 1500ms. And you suddenly took and hid half of the page in such a way that the necessary block is now at a height of 600px. So you find yourself in the footer, because they said - turn up to 1000px.

In short, try to do so.

 $(".nav").on("click","a", function (event) { event.preventDefault(); $('.content').hide(); $('.content.' + this.className).show(); var id = $(this).attr('href'); var top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 1500); });
  • Thank you, Ivan, for clarification! - Coveraver