JQuery прокручивается до привязки (минус установленное количество пикселей)

Я использую следующий код для прокрутки к точкам привязки с помощью jQuery:

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});

Есть ли способ заставить его прокручивать этот якорь, но минус заданное количество пикселей? (в моем случае я хочу, чтобы он пошел -92px)

Спасибо за любую помощь.

Ответ 1

Мне просто пришлось решить эту проблему самостоятельно. Вам нужно настроить смещение на количество пикселей, которые вы хотите прокрутить. В моем случае, мне было нужно, чтобы он был на 50 пикселей выше на странице. Итак, я вычитал 50 из targetOffset.

Теперь часть кода, которая бросает вам шалость, - location.hash - это говорит браузеру установить его местоположение в определенную точку. Во всех случаях это строка, содержащая только что прокрученный идентификатор. Таким образом, это будет что-то вроде "#foo". Вы должны сохранить это, поэтому мы его оставим.

Однако, чтобы предотвратить переключение браузера при установке location.hash(действие браузера по умолчанию), вам просто нужно предотвратить действие по умолчанию. Итак, передайте свое событие "e" через функцию завершения функции animate. Затем просто вызовите e.preventDefault(). Вы должны будете убедиться, что браузер действительно вызывает событие, иначе он будет выходить из строя. Таким образом, if-test исправляет это.

Готово. Здесь отредактированный фрагмент кода:

if (target) {
    var targetOffset = $target.offset().top - 50;
    $(this).click(function(event) {
      if(event != 'undefined') {
          event.preventDefault();}
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
          e.preventDefault();
          location.hash = target;
      });
    });
  }

Ответ 2

Это то, что я использую:

function scrollToDiv(element){
    element = element.replace("link", "");
    $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow');
};

... где 50 - количество пикселей для добавления/вычитания.

Ответ 3

Этот код работает для меня в любом привязке ссылок на моем сайте, чтобы высота "150 пикселей" для меню исправления сверху.

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-150
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->

Ответ 4

Лол)

<span class="anchor" id="section1"></span>
<div class="section"></div>

<span class="anchor" id="section2"></span>
<div class="section"></div>

<span class="anchor" id="section3"></span>
<div class="section"></div>

<style>
.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}
</style>

Ответ 5

Мне не удалось использовать решение Jonathan Savage, поскольку я не смог передать обратный вызов события в animate() без ошибок. Сегодня у меня был этот вопрос, и я нашел простое решение:

      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top - 92;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = targetOffset;
          });
        });

Вычтите смещение пикселя из переменной targetOffset, а затем присвойте location.hash этой переменной. Останавливает перескакивание страницы при прокрутке к целевому хешу.

Ответ 6

Это реализация jQuery, которую я использую, которая была основана на решении Никита Андрейчук. Переменная регулировки пикселя может быть установлена динамически таким образом, хотя в этом примере она жестко закодирована.

$( 'a' ).each(function() {
    var pixels = 145;
    var name = $( this ).attr( 'name' );
    if ( typeof name != 'undefined' ) {
        $( this ).css({
          'display'    : 'block',
          'height'     : pixels + 'px',
          'margin-top' : '-' + pixels + 'px',
          'visibility' : 'hidden'
        });
    }
});

Ответ 7

Вот что я использую. Установите смещение в соответствии с тем, что вам нужно.

$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  $(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50});
});