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)

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

 robbrit06 июл. 2012 г., 17:25
 John06 июл. 2012 г., 17:31
Чем они похожи ?? Моя задача - прокрутить до КАЖДОГО якоря с помощью jquery, то, на что вы ссылаетесь, хочет прокрутить, когда они находятся в верхней части страницы. Код очень отличается.
 robbrit06 июл. 2012 г., 17:58
Разница лишь в том, к какому селектору вы хотите перейти, и к смещению. Посмотрите на принятый ответ и замените#id с помощью селектора, который вы хотите, и замените100 со смещением, которое вы хотите.

Ответы на вопрос(8)

просто создайте пустой DIV над точкой привязки, в которую вы хотите попасть, затем в CSS сделайте div

anchorpointl{margin-top: -115px;}

или сколь угодно высоко или низко вы хотите пойти и работа сделана

ошении & quot; 150px & quot; Высота для меню исправления сверху.

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

так как я не мог передать обратный вызов события в 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 этой переменной. Останавливает прыжок страницы при прокрутке до целевого хэша.

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

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

 04 нояб. 2015 г., 13:30
Спасибо! именно то, что мне нужно!

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

& # x438; & # x43A; & # x438; & # x442; & # x430; & # x410; & # x434; & # x440; & # x439; & # x447; & # x443; & # x443; & gt; Переменная регулировки пикселя может быть установлена динамически таким образом, хотя в этом примере она жестко задана.

$( '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'
        });
    }
});

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

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

Тем не менее, чтобы браузер не "прыгнул" если установлен location.hash (действие браузера по умолчанию), вам просто нужно запретить действие по умолчанию. Итак, пройдите ваше мероприятие «e». через функцию завершения в функции анимации. Затем просто вызовите 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;
      });
    });
  }
 04 нояб. 2015 г., 18:11
Андрею, взгляни на ответ Боргара вstackoverflow.com/questions/1489624/…
 18 июн. 2014 г., 15:38
Извините, я знаю, что это старый вопрос, но: функция обратного вызова animate не получает никаких параметров (см.api.jquery.com/animate), поэтому e.preventDefault () завершается ошибкой. Изменилось ли это за последние 2 года? Существует ли современный способ предотвращения поведения по умолчанию для location.hash = target?

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

 18 нояб. 2015 г., 15:40
идеальное решение CSS, спасибо
 01 мая 2015 г., 20:16
идеальное спасибо и без jquery!
 22 сент. 2015 г., 23:21
Это прекрасно работает, но вы должны знать, что оно может охватывать ссылки, кнопки или любые другие интерактивные элементы, которые у вас есть в 115 пикселей над якорем, и вы не сможете нажимать на них ...

Ваш ответ на вопрос