Skip to content

Instantly share code, notes, and snippets.

@TrywaR
Last active December 6, 2019 05:58
Show Gist options
  • Save TrywaR/be93567fc240c09071e351a6eef33c84 to your computer and use it in GitHub Desktop.
Save TrywaR/be93567fc240c09071e351a6eef33c84 to your computer and use it in GitHub Desktop.
[ secaftl | section after load ]

secaftl | section after load | Авто скролл по разделам

!Нид джекуери

Параметр Описание Что писать
secaftl Блок к которому крутить, и который загружать обое название без особых символов
secaftl_show К какой секции скролить secaftl
secaftl_show_find К чему в секции скролить id элемента
secaftl_load Откуда загрузить контент в секцию url

Как работает

  • При клике на кнопку из index.htm, страница проскролится до <section data-secaftl="section"> и добавит ему класс _active_, самой кнопке во время действия прилетит класс _load_ после действия _hide_
  • При клике на ссылку из index.htm, страница проскролится к элементу <div id="section_find>Текст 3</div> раздела <section data-secaftl="section">
  • При обоих событиях повесится якорь из data-secaftl если и data-secaftl_show_find есть, то якрорь будет такой: data-secaftl & data-secaftl_show_find (без пробелов), таким образом после перезагрузки страницы, всё подгрузится по очереди, до нужного элемента
  • <body> и <html> вешается класс _secaftl_no_show_ чтобы изначально убрать скролл у страницы
  • Для <footer> вешается класс _secaftl_no_show_ чтобы скрыть его, пока не покажется последний блок на странице
  • Eсли на странице нет data-secaftl, то скрипт не работает
  • Скролл скролиться только после того как всё корректно загрузится
<html>
<body>
<header></header>
<main>
<button data-secaftl_show="section">Кнопка далее</button>
<a data-secaftl_show="section" data-secaftl_show_find="section_find">Кнопка для скрола на подраздел раздела</a>
<section>
hello world!
</section>
<section data-secaftl="section">
<div>Текст</div>
<div>Текст 2</div>
<div id="section_find>Текст 3</div>
</section>
</main>
<footer></footer>
</body>
</html>
// secaftl | section after load
// - Подготовка secaftl
function secaftl(){
// -- Запускаемся если есть нужные секции
if ( $(document).find('[data-secaftl]').length ) {
// Запрещаем пользователю скролить
$('html, body').addClass('_secaftl_no_scroll_')
// --- Скрываем футер, пока не докрутим до конца
$(document).find('footer').addClass('_secaftl_no_show_')
// --- Перебираем элементы, для расстановки стилей и задержек анимации
$(document).find('[data-secaftl]').each(function(index, elem){
// ---- Добавляем эффекты анимации
$(this).find('._secaftl_animate_duration_').each(function(index, elem){
$(this).find('._secaftl_animate_duration_item').css({
'transition-duration': ( index + 1 ) / 2 + 's'
})
})
})
// --- Если есть якорь, проверяем есть ли под него элемент
if ( location.hash ) {
// ---- Чистим и сохраняем адрес секции
secaftl_hash = location.hash.substr(1)
secaftl_find_hash = false
// ---- Если есть якорь до элемента секции
if ( secaftl_hash.indexOf('&') > 0 ){
secaftl_hash = secaftl_hash.substr( 0, secaftl_hash.indexOf('&') )
secaftl_find_hash = location.hash.substr( location.hash.substr(1).indexOf('&') + 2 )
}
// ---- Если секция есть, подгружаем весь контент до секции и показываем её
if ( $(document).find('[data-secaftl="'+ secaftl_hash +'"]').length )
secaftl_show( secaftl_hash, secaftl_find_hash )
else
// ---- Скролим в начало, а то если левый якорь, страница может встать по середине
$('html, body').scrollTop(0)
}
// --- Показ по клику
if ( $(document).find('[data-secaftl_show]').length )
$(document)
.find('[data-secaftl_show]')
.on('click', function(){
// ---- Анимация загрузки на кнопке
$(this).addClass('_load_')
// ---- Если нужен скролл на внутренний элемент секции
if ( $(this).data().secaftl_show_find )
secaftl_show( $(this).data().secaftl_show, $(this).data().secaftl_show_find )
else
secaftl_show( $(this).data().secaftl_show )
return false
})
}
}
// - Показ элементов
function secaftl_show( secaftl_hash, secaftl_find_hash ){
// -- Собираем необходиую инфу
var
secaftl_length = $(document).find('[data-secaftl]').length - 1
// -- Перебираем элементы, для показа нужных
$(document).find('[data-secaftl]').each(function(index, elem){
var secaftl_section = $(this)
// --- Загружаем содержимое, если нужно
if ( secaftl_section.data().secaftl_load ) {
secaftl_section.load( secaftl_section.data().secaftl_load, function(data) {
// ---- Вставляем куда надо
console.log(data)
})
}
// --- Показываем секцию, если загружена
secaftl_section.addClass('_active_').ready(function(){
// ---- Скрываем стрелку
$(document)
.find('[data-secaftl_show='+secaftl_section.data().secaftl+']')
.removeClass('_load_')
.addClass('_hide_')
// ---- Если последний элемент, выводим футер
if ( secaftl_length == index )
$(document).find('footer').removeClass('_secaftl_no_show_')
// ---- Если нужный элемент, cкролим к ниму, и дальше не показываем
if ( secaftl_section.data().secaftl == secaftl_hash ) {
// ----- Если нужен скролл на внутренний элемент секции
if ( secaftl_find_hash ){
secaftl_offset = $('#'+secaftl_find_hash+'').offset().top
// ------ Чтобы продолжить с того же места после перезагрузки
document.location.hash = secaftl_section.data().secaftl + '&' + secaftl_find_hash
}
// ----- Если нет, скролл до секции
else {
secaftl_offset = secaftl_section.offset().top
// ------ Чтобы продолжить с того же места после перезагрузки
document.location.hash = secaftl_section.data().secaftl
}
// ----- Скролим
$(document).ready(function(){
$('html, body')
.removeClass('_secaftl_no_scroll_')
.animate({scrollTop: secaftl_offset}, 500)
})
}
})
// --- Если нужный элемент, дальше не показываем
if ( secaftl_section.data().secaftl == secaftl_hash )
return false
})
}
secaftl()
// secaftl | section after load x
// secaftl | section after load
._secaftl_no_scroll_
overflow-y: hidden ! important
footer
position: relative ! important
bottom: 0 ! important
transition: all .5s ease .5s ! important
&._secaftl_no_show_
position: fixed ! important
bottom: -100vh ! important
opacity: 0 ! important
z-index: -100 ! important
// Mobile fix
@media screen and (max-width:776px)
html,
body
&._secaftl_no_scroll_
overflow-y: auto ! important
footer
position: relative ! important
bottom: 0 ! important
transition: all .5s ease .5s ! important
&._secaftl_no_show_
position: relative ! important
bottom: 0 ! important
opacity: 1 ! important
z-index: 1 ! important
// secaftl | section after load x
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment