Skip to content

Instantly share code, notes, and snippets.

@artemijeka
Last active Aug 18, 2021
Embed
What would you like to do?
Плавная прокрутка до элемента на другой или на текущей странице jQuery | Smooth scrolling to an element on another or current page jQuery.

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

/**
* @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 = '';//очищаем хеш в адресной строке чтобы предотвратить скролл браузера
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment