Прокрутка к якорю, но немного выше

228

05 сентября 2017, 10:16

Приветствую. Прокрутка к якорю на jQuery - очень популярная тема и у меня как раз вопрос по этому. Есть код:

        $('a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
        'scrollTop': $target.offset().top
        }, 500, 'swing', function () {
        window.location.hash = target;
        });
        });

Он работает, все отлично, все прекрасно.

Но как сделать так, чтобы при нажатии осуществилась прокрутка к якорю, но чтобы до якоря не "доставало" 50рх например?

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

        $(".scroll_down_1").click(function() {
            $('body').animate({ scrollTop: '+=' + 55 }, 'fast');
        });

Это из-за того, что в Bootstrap navbar с фиксированным позиционированием и когда производится прокрутка к якорю сам якорь не виден, он закрывается navbar'ом. В Google MDL более продумано сделали. Они сделали header вне прокрутки основного контента и если даже кликнуть по якорю он никогда не будет закрыт header'ом.

Надеюсь на понимание. Буду очень благодарен за помощь.

Answer 1

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
  e.preventDefault();
  var target = this.hash,
  $target = $(target);
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top - 50
  }, 500, 'swing', function () {
    window.location.hash = target;
  });
});