1

Здравствуйте. Не могу понять в чем проблема. Есть якоря на странице, привязанные к ссылкам:

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

Скрипт скрывает статьи, кроме выбранной и скролит к 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:

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

Проблема в том, что при переходе по ссылкам на странице, скрол уезжает то к футеру, то в середину контента. Один раз может отработать нормально. при повторном переходе уехать вниз. А должен скролить к

<div id="svecha"></div>
3
  • Вы должны сначала провести манипуляции со скрытием и отображением элементов hide/show, а уже потом вычислить позицию целевого элемента top = $(id).offset().top и собственно запустить анимацию $('body,html').animate({scrollTop: top}, 1500)
    – qodunpob
    7 авг 2016 в 12:01
  • 1
    Спасибо, Константин. К сожалению, я не могу отметить Ваш ответ, так как написано в виде комментария.
    – Coveraver
    7 авг 2016 в 12:06
  • не за что, а на счет баллов не переживайте, я не ради них подсказывал ;)
    – qodunpob
    7 авг 2016 в 12:10

1 ответ 1

1

Полагаю, дело в том, что вы сначала вызываете прокрутку, а потом прячете блоки.

Посудите сами: вы сказали "прокрути на высоту 1000px" (именно на такой высоте у вас нужный блок). Скрипт все рассчитал и начал процесс постепенного смещения страницы, длительностью 1500мс. А вы вдруг взяли и спрятали половину страницы таким образом, что нужный блок теперь на высоте 600px. Вот и оказываетесь в футере, ведь сказали - крутить до 1000px.

Короче говоря, попробуйте сделать так

$(".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);
});
1
  • Спасибо, Иван, за разъяснения!
    – Coveraver
    7 авг 2016 в 12:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.