artemijeka
8/18/2021 - 8:12 PM

Autoscrolling to an element on another or current page | Автопрокрутка до элемента на другой или на текущей странице

Autoscrolling to an element on another or current page | Автопрокрутка до элемента на другой или на текущей странице

Плавная прокрутка до элемента на другой или на текущей странице | Smooth scrolling to an element on another or current page.

Autoscrolling.js

Применение | Usage:

Ссылка на страницу и якорь целевого элемента | Link to the page and anchor of the target element:

<a href="/#takePart" class="header__nav-item">участие в проекте</a>

Целевой элемент с ID | Target element with ID:

<section id="takePart"></section>

js:

new Autoscrolling({
  selectorFrom: '.header__menu-link',
  speedScroll: 750,
  //selectorTarget: '.app__box-two',
  selectorTopFixed: '.header__container',
  //addMarginTopPx: 0,
  functionBeforeScroll: () => { window.customIsAutoscrolling = true; },
  functionCallBack: () => { window.customIsAutoscrolling = false; },
});

#autoscrolling #auto_scrolling #auto_scrolling_to_id_block #auto_scrolling_to_id #auto_scroll_to_id #auto_scroll_to_block_id #auto_scroll_to_block

/**
 * Title: Smooth scrolling to an element on another or current page | Плавная прокрутка до элемента на другой или на текущей странице
 * Author:  Artem Kuznecov
 * Contacts web.master-artem.ru
 * 
 * @version 1.7 - 23.03.2022
 * @cacher https://snippets.cacher.io/snippet/6cf4733376ca1d55c7fe
 * @gist https://gist.github.com/artemijeka/3c4510d49cabf5448038714ecdffee19
 * 
 * @dependancies scrollSmoothlyToPosition() - https://snippets.cacher.io/snippet/1530dfc32408f9682b30 - https://gist.github.com/artemijeka/860cfcd079b1f42cace732c31b5e3a29 
 * 
 * @param {String}   obj.selectorFrom         | a link or any element if you specified the target element selectorTarget | ссылка или любой элемент если указали целевой элемент selectorTarget
 * @param {Number}   obj.speedScroll          | optionally - default: 1000
 * @param {String}   obj.selectorTarget       | optionally - if specified, it will scroll to this element by clicking on the select From element | если указано то пролистнётся к этому элементу по щелчку на элемент selectorFrom
 * @param {String}   obj.selectorTopFixed     | optionally - default: 0, a fixed element at the top, such as a header | фиксированный элемент сверху, напрмер шапка 
 * @param {Number}   obj.addMarginTopPx       | optionally - default: 0
 * @param {Function} obj.functionCallBack     | optionally - example: for close menu | например: для закрытия меню
 * @param {Function} obj.functionBeforeScroll | optionally
 **/
function Autoscrolling(obj) {
  this.links = document.querySelectorAll(obj.selectorFrom);
  this.addMarginTopPx = obj.addMarginTopPx || 0;
  this.speedScroll = obj.speedScroll || 1000;
  var _self = this;

  /* Плавный скролл до элемента с id на текущей странице. */
  for (var link of _self.links) {
    link.addEventListener('click', function (event) {
      //здесь считается отступ от верха потому что высота верхней панели может меняться
      this.topFixedEl = document.querySelector(obj.selectorTopFixed);
      _self.topFixedElementHeight = ((this.topFixedEl) ? this.topFixedEl.clientHeight : 0);
      _self.sumMarginTop = _self.topFixedElementHeight + _self.addMarginTopPx;
      if (obj.selectorTarget) {
        var targetForScroll = document.querySelector(obj.selectorTarget);
      } else {
        var targetForScroll = document.querySelector(event.target.hash);
      }
      if (targetForScroll) {
        event.preventDefault();
        autoscrolling(targetForScroll.getBoundingClientRect().top, _self.speedScroll, _self.sumMarginTop);
      }
    });
  }

  /* Плавный скролл до элемента с id на другой странице. */
  if (window.location.hash) {
    var targetForScroll = document.querySelector(window.location.hash);
    window.location.hash = '';//очищаем хеш в адресной строке чтобы предотвратить стандартный скролл браузера
    if (targetForScroll) {
      autoscrolling(targetForScroll.getBoundingClientRect().top, _self.speedScroll, _self.sumMarginTop);
    }
  }

  function autoscrolling(pos, speed, marginTop) {
    if (obj.functionBeforeScroll) {
      obj.functionBeforeScroll();
    }
    
    scrollSmoothlyToPosition(pos, speed, marginTop);

    if (obj.functionCallBack) {
      setTimeout(function () {
        obj.functionCallBack();
      }, _self.speedScroll);
    }
  }

}