Смещение плавной прокрутки Jquery

Я делаю одностраничный сайт с липкой навигацией по центру вверху с шириной около 1000 пикселей и высотой около 20-25 пикселей, теперь я также включил функцию плавной прокрутки, но моя проблема заключается в том, что всякий раз, когда страница прокручивается до активной страницы, заголовок спрятался под липкой навигацией, как мне получить смещение нижней части липкой навигации? Спасибо.

Это код js между прочим:

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

jquery smooth-scrolling
person Jm Cruz    schedule 08.10.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Самый простой способ сохранить ваш текущий код как есть и добавить это смещение вверху вашего веб-сайта — добавить необходимое значение смещения после .top, например так:

$('a').click(function(e) {
    var target = $(this).attr('href');
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $(target).offset().top - 20
    }, 800, 'easeInOutCirc');
});

Надеюсь, этот ответ менее сложен, чем последний. :)

person Khaled    schedule 17.08.2012

arrow_upward
2
arrow_downward

Метод jQuery .position() даст вам верхнее и левое смещения элемента по отношению к странице. Таким образом, вам просто нужно добавить .outerHeight() липкой навигации к ее значению .position().top.

Вот пример: http://jsfiddle.net/NUfaZ/1/

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

person maxedison    schedule 08.10.2011
comment
ошибаюсь, извините, но где или как мне это поставить? я действительно новичок в js. Спасибо. - person Jm Cruz; 08.10.2011
comment
Я отредактировал свой ответ, включив в него пример, а также исправив ошибку: в jQuery нет метода «.pos()» — он называется «.position()». - person maxedison; 08.10.2011
comment
Хорошо, теперь у меня есть externalHeight, это 20. Но где мне разместить эти 20 в моем коде? я попробовал это на scrollTop: $(target).offset({top:20}).top. но он не плавно прокручивался. Большое спасибо! - person Jm Cruz; 08.10.2011
comment
Вы не вводите 20, externalHeight вычисляет его для вашей переменной. Посмотрите на его пример - person Brad; 08.10.2011
comment
Джим - мне трудно понять проблему из вашего последнего комментария. Если бы вы могли создать jsFiddle, это было бы очень полезно. - person maxedison; 08.10.2011
comment
Прости. Но у вас есть электронная почта? Я пришлю изображение, которое, я думаю, мне будет намного легче объяснить. Прости еще раз. - person Jm Cruz; 08.10.2011
comment
Просто загрузите изображение куда-нибудь и дайте ссылку - person maxedison; 08.10.2011

arrow_upward
0
arrow_downward

См. https://codepen.io/pikeshmn/pen/mMxEdZ.

Подход: мы получаем высоту фиксированной навигации с помощью document.getElementById('header').offsetHeight и смещаем прокрутку до этого значения.

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

P.S:

  • Он включает хорошую разницу в 5 пикселей между заголовком и целью.
  • Эффект прокрутки не жесткий, а плавный; Плавная прокрутка
person Pikesh Prasoon    schedule 20.08.2017