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

readme.md

Плавная прокрутка до элемента на другой или на текущей странице | 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

Autoscrolling.js

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

  /* Плавный скролл до элемента с id на текущей странице. */
  for (var link of _self.links) {
    link.addEventListener("click", function (event) {
      event.preventDefault();
      //здесь считается отступ от верха потому что высота верхней панели может меняться
      this.elTopFixed = document.querySelector(params.selectorTopFixed);
      _self.elTopFixedHeight = this.elTopFixed
        ? this.elTopFixed.clientHeight
        : 0;
      _self.sumMarginTop = _self.elTopFixedHeight + _self.addOffsetTop;
      selectorTarget = params.selectorTarget || event.target.hash;

      if (selectorTarget) {
        autoscrolling({
          selectorTarget: selectorTarget,
          speed: _self.speedScroll,
          marginTop: _self.sumMarginTop,
        });
      }
    });
  }

  /* Плавный скролл до элемента с id на другой странице. */
  if (window.location.hash) {
    selectorTarget = window.location.hash;
    window.location.hash = ""; //очищаем хеш в адресной строке чтобы предотвратить стандартный скролл браузера
    if (selectorTarget) {
      autoscrolling({
        selectorTarget: selectorTarget,
        speed: _self.speedScroll,
        marginTop: _self.sumMarginTop,
      });
    }
  }

  function autoscrolling({ selectorTarget, speed, marginTop }) {
    if (params.functionBeforeScroll) {
      params.functionBeforeScroll();
    }

    scrollSmoothlyToPosition({ selectorTarget, speed, marginTop });

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