1

На сайте фиксированное меню которое перекрывает часть контента, прокрутка отлично работает но как подогнать на -100px вот скрипт -

  $("#contactyGo").click(function() {
      $("html, body").animate({
         scrollTop: $($(this).attr("#contacty")).offset().top + "px"
      }, {
         duration: 500,
         easing: "swing"       
      });
      return false;
   });

пробовал написать - 100 перед "px" - не помогло. Помогите нубу пожалуйста.

2
  • смените расположение #contacty - или сам якорь переместите в css , посмотрите в css это
    – user33274
    Commented 23 окт. 2016 в 23:44
  • Можно как вариант, но в блоках нет участков выше на столько сколько надо, я бы допилил что нибудь но там минимум 5 пунктов меню будет и точно придется что-то костылять, я думал есть какое-то решение в плане допиливания самого скрипта, я jquery не давно изучаю, но думаю что данная проблема должна решатся иным путем, без переделки шаблона, а по ссылочке ничего похожего не нашел, куда там смотреть? Commented 24 окт. 2016 в 0:13

1 ответ 1

2
  1. Функция .attr() возвращает значение атрибута, если указать название атрибута. Ваш код должен возвращать ошибку, проверьте консоль. А пока в коде ошибка, срабатывает, скорее всего, обычная ссылка.

  2. Перед .animate добавьте .stop(). Пригодится, когда на странице окажется несколько таких кнопок и пользователь начнёт жать их, не дожидаясь окончания прокрутки.

  3. jQuery работает вордпрессе в режиме noConflict, поэтому заверните свой код в

jQuery(document).ready(function($) {

});
  1. Сместить якорь можно без скрипта, поставив ему большой padding-top и отрицательный margin-top. Но у вас уже есть скрипт, так что лучше его и доработать:

jQuery(document).ready(function($) {
  
  $("#contactyGo").click(function() {
    $("html, body").stop().animate({
      scrollTop: $($(this).attr('href')).offset().top - 100
    }, {
      duration: 500,
      easing: "swing"       
    });
    return false;
  });
  
});
<a id="contactyGo" href="#contacty">Ссылка</a>

<p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> 

<h2 id="contacty">Контакты</h2>

<p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

12
  • По поводу css - вариант работает, но проблема в том что что блок к которому идет прокрутка и блок над ним имеют разные цвета и вариант с padding-top и margin-top делает так что контент с верхнего блока вылазит на нижний, не совсем красиво смотрится если честно, а по поводу скрипта - не работает и все, может это бред конечно, но я вставил его в код слайдера в шаблоне, сайт на wordpress если что, я конечно не думаю что ошибка кроется там, да и прокрутка работает плавно, может ли быть какая-то лажа в том что скрипт лежит вместе с скриптом слайдера на jquery? Скрипт вставил Ваш. Commented 24 окт. 2016 в 2:22
  • @ТарасПоточилов Консоль ругается на что-нибудь? Ссылку на сайт покажите. Commented 24 окт. 2016 в 2:30
  • shovanka.com.ua только не смейтесь)) вторую ночь делаю, в меню подключил якорь только на контакты Commented 24 окт. 2016 в 2:35
  • @ТарасПоточилов Не вижу код с прокруткой к контактам по клику. Ни в custom.js, ни в hook-custom-script.js. Где его найти? Или проверьте, как его подключили. Commented 24 окт. 2016 в 3:47
  • скрипт положил сюда shovanka.com.ua/www/wp-content/themes/skt-white/js/ jquery.nivo.slider.js Commented 24 окт. 2016 в 4:16

Ваш ответ

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

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