Как реализовать доводку скролла до ближайшего блока?

Question

[Александр Логинов-Солоницын]

Всем доброго дня. В общем суть - при скролле не всегда удается сфокусироваться точно на блоке (они у меня подстраиваются по высоте браузера), поэтому нужно сделать небольшую доводку до ближайшего блока. Например я проскроллил лишние 20 пикселей от верха блока, а меня раз и довели до его начала. Например как тут.

Answer 1

[WebDev]

Ну логика примерно такая: считаете отступ вашего блока $('#block').offset().top, и вешаете событие на скролл, в котором проверяете, на сколько была прокручена страница, и если этот показатель находится в +-20 пикселях от вашего блока, то прокручиваем к нему.

Comments

[Александр Логинов-Солоницын]

Спасибо) Весь алгоритм прямо по полочкам)

Answer 2

[barcik]

var scrollTimeout,
    scrollGap = 20,
    scrollSelector = '.block';

$(window).scroll(function () {
  if (scrollTimeout) {
    clearTimeout(scrollTimeout);
  }

  scrollTimeout = setTimeout(function () {
    var nearestBlock = false,
        nearestBlockOffset = false,
        range = {
          top: $(window).scrollTop() - scrollGap,
          middle: $(window).scrollTop(),
          bottom: $(window).scrollTop() + scrollGap
        };

    $(scrollSelector).each (function () {
      if ($(this).offset().top < range.bottom && $(this).offset().top > range.top) {
        if ($(this).offset().top > range.middle) {
          blockOffset = $(this).offset().top - range.middle;
        } else {
          blockOffset = range.middle - $(this).offset().top;
        }

        if (nearestBlockOffset === false || nearestBlockOffset > blockOffset) {
          nearestBlockOffset = blockOffset;
          nearestBlock = $(this);
        }
      }
    });

    if (nearestBlock != false && nearestBlockOffset > 0) {
      $("html, body").animate({scrollTop: nearestBlock.offset().top}, {duration: 100, easing: 'swing'});
    }
  }, 100);
});

Comments

[Александр Логинов-Солоницын]

Спасибо, код очень хороший и рабочий. Но все равно, готовый код расслабляет) А с другой стороны, все же нужно учиться в чужом коде разбираться! Благодарю