artemsites
7/4/2019 - 6:26 PM

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

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

readme.md
content_copyfile_download
  • Rendered
  • Source

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

jquery.autoscrolling.js

Зависимости | Dependencies:

jquery-3.6.0.min.js

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

<a class="desktop-menu__item" href="/history/#year2021">
    2021 год
</a>

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

<div id="year2020"><div>

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

var letterPage = new Autoscrolling({
  selectorButon: '.to-letter',
  durationScroll: 1500, //optionally (default: 500)
  delayForOtherPage: 1500, //optionally (default: 0)
  selectorTopFixedElement: '.header__nav', //optionally (default: 0, фиксированный элемент сверху, напрмер шапка) 
  addMarginTopPx: 35 //optionally (default: 0)
});

#jquery_module_autoscrolling #jquery_module_auto_scrolling #jquery_module_auto_scrolling_to_id_block #jquery_module_auto_scrolling_to_id #jquery_module_auto_scroll_to_id #jquery_module_auto_scroll_to_block_id #jquery_module_auto_scroll_to_block

script.js
content_copyfile_download
/**
 * @title   Smooth scrolling to an element on another or current page jQuery. | Плавная прокрутка до элемента на другой или на текущей странице jQuery. 
 * @version 1.0
 * @author  Artem Kuznecov
 * @email   work.artem.kuznecov.samara@yandex.ru
 * @website web.master-artem.ru
 * @link    https://snippets.cacher.io/snippet/272470c3dfd7b504d6c9
 * @param {String} obj.selectorLinks
 * @param {Number} obj.durationScroll          | optionally (default: 500)
 * @param {Number} obj.delayForOtherPage       | optionally (default: 0)
 * @param {String} obj.selectorTopFixedElement | optionally (default: 0, фиксированный элемент сверху, напрмер шапка) 
 * @param {Number} obj.addMarginTopPx          | optionally (default: 0)
 */
function Autoscrolling(obj) {
  var self = this;
  this.$links = $(obj.selectorLinks);
  this.durationScroll = obj.durationScroll || 500;
  this.delayForOtherPage = obj.delayForOtherPage || 0;
  this.topFixedElementHeight = $(obj.selectorTopFixedElement).height() || 0;
  this.addMarginTopPx = obj.addMarginTopPx || 0;
  this.sumMarginTop = self.topFixedElementHeight + self.addMarginTopPx;

  /* Плавный скролл до элемента с id на текущей странице. */
  self.$links.each(function (i, el) {
    $(el).click(function (event) {
      var $targetForScroll = $( $(event.target)[0].hash );
      if ( typeof($targetForScroll[0]) !== 'undefined' ) {
        event.preventDefault();
        self.scrollToTarget( $targetForScroll, self.sumMarginTop );
      }
    });
  });
  
  /* Плавный скролл до элемента с id на другой странице. */
  $(document).ready(function () {
    var $targetForScroll = $(window.location.hash);
    if ($targetForScroll) {
      self.scrollToTarget( $targetForScroll, self.sumMarginTop, true );
    }    
  });
  
  this.scrollToTarget = function ($targetForScroll, sumMarginTop, otherPage = false) {
    if (!otherPage) { self.delayForOtherPage = 0; }
    if ($targetForScroll[0]) {
      var offsetSectionOfTop = $targetForScroll.offset().top - sumMarginTop;
      $('html, body').delay(self.delayForOtherPage).animate({ scrollTop: offsetSectionOfTop }, self.durationScroll);
      window.location.hash = '';//очищаем хеш в адресной строке чтобы предотвратить скролл браузера
    }
  }

}