Как создать плавный скрол к якорю на новой странице?
Мой код по клику на класс .menu-item-1689 пользователя переносит на место с классом .kol-scrol и т.д. Но если мы находимся на другой странице ничего не работает. Знаю, что нужно использовать хеш, не знаю, как. Видел вот эту статью: https://ru.stackoverflow.com/questions/735098/%d0%...
но не смог адаптировать свой код. Покажите, как должно быть, пожалуйста.
$('.menu-item-1689').on('click', function() { $('html,body').animate({scrollTop:$('.kol-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1690').on('click', function() { $('html,body').animate({scrollTop:$('.pr-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1691').on('click', function() { $('html,body').animate({scrollTop:$('.dost-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1692').on('click', function() { $('html,body').animate({scrollTop:$('.onas-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1693').on('click', function() { $('html,body').animate({scrollTop:$('.kont-scrol').offset().top+"px"},{duration:1E3}); }); |
$('.menu-item-1689').on('click', function() { $('html,body').animate({scrollTop:$('.kol-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1690').on('click', function() { $('html,body').animate({scrollTop:$('.pr-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1691').on('click', function() { $('html,body').animate({scrollTop:$('.dost-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1692').on('click', function() { $('html,body').animate({scrollTop:$('.onas-scrol').offset().top+"px"},{duration:1E3}); }); $('.menu-item-1693').on('click', function() { $('html,body').animate({scrollTop:$('.kont-scrol').offset().top+"px"},{duration:1E3}); });
Дополнительно:
Получилось сделать прикладываю готовый код
$(document).ready(function(){ $('body,html').scrollTop(0); $(".menu-item").on("click","a", function (event) { var id = $(this).attr('href'), top = $(id).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); }); var hash = location.hash; if($(hash).length){ var top = $(hash).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); } }); /* код 1 - выше работает с хешем и помогает перейти на тот якорь, на который нужно с новой страницы .menu-item - класс пункта меню на который кликать можно. Ставьте любой. */ $(function() { $('a[href*="#1"]:not([href="#"])').click(function() { /*если у вас есть бутстрап на сайте, как у меня, то вам нужна эта проверка, тогда все якоря на которые должен быть скрол должны начинаться с #1 иначе модальные окна бутстрапа не будут работать*/ if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1500); return false; } } }); }); /* код 2 - выше скролит именно на главной странице к нужному якрою*/ |
$(document).ready(function(){ $('body,html').scrollTop(0); $(".menu-item").on("click","a", function (event) { var id = $(this).attr('href'), top = $(id).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); }); var hash = location.hash; if($(hash).length){ var top = $(hash).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); } }); /* код 1 - выше работает с хешем и помогает перейти на тот якорь, на который нужно с новой страницы .menu-item - класс пункта меню на который кликать можно. Ставьте любой. */ $(function() { $('a[href*="#1"]:not([href="#"])').click(function() { /*если у вас есть бутстрап на сайте, как у меня, то вам нужна эта проверка, тогда все якоря на которые должен быть скрол должны начинаться с #1 иначе модальные окна бутстрапа не будут работать*/ if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1500); return false; } } }); }); /* код 2 - выше скролит именно на главной странице к нужному якрою*/
Советую использовать код 1 и код 2 вместе если хотите скрол не только на главной но и на внутренних страницах. Фаил с js подключал перед закрывающим тегом body. Все работает на WP.
Ответы:
$('.menu-item-1689').on('click', function() { $('html,body').animate({scrollTop: $('.kol-scrol').offset().top}, 1000); }); $('.menu-item-1690').on('click', function() { $('html,body').animate({scrollTop: $('.pr-scrol').offset().top}, 1000); }); $('.menu-item-1691').on('click', function() { $('html,body').animate({scrollTop: $('.dost-scrol').offset().top}, 1000); }); $('.menu-item-1692').on('click', function() { $('html,body').animate({scrollTop: $('.onas-scrol').offset().top}, 1000); }); $('.menu-item-1693').on('click', function() { $('html,body').animate({scrollTop: $('.kont-scrol').offset().top}, 1000); }); |
$('.menu-item-1689').on('click', function() { $('html,body').animate({scrollTop: $('.kol-scrol').offset().top}, 1000); }); $('.menu-item-1690').on('click', function() { $('html,body').animate({scrollTop: $('.pr-scrol').offset().top}, 1000); }); $('.menu-item-1691').on('click', function() { $('html,body').animate({scrollTop: $('.dost-scrol').offset().top}, 1000); }); $('.menu-item-1692').on('click', function() { $('html,body').animate({scrollTop: $('.onas-scrol').offset().top}, 1000); }); $('.menu-item-1693').on('click', function() { $('html,body').animate({scrollTop: $('.kont-scrol').offset().top}, 1000); });
- Работает только на главной. Если перехожу на стороннюю старницу ничего не работает. Или что указывать в ссылке в меню, чтобы работало и на сторонней странице? Сайт на wp все подключается частями в том числе и меню.
- solomonfox, если вы вставляете этот скрипт только на главной странице, то конечно так и будет. Нужно вставить таким образом, чтобы на всех страницах он был.
В любом случае, не хватает подробностей.upd: невнимательно прочитал. Нужно делать якоря блокам в ссылках. И по клику на любой a в меню обрабатывать. То есть они должны ввести на главную страницу, а по якорю ты будешь определять до какого блока скроллить.
Таким образом, находясь на другой странице, ты сначала переходишь на главную и после этого делаешь то, что выше. Напиши функцию и выполняй её в двух случаях: страница загружена и/или клик по ссылке в меню.
В общем и целом на SO ответ с галочкой описывает то, что нужно. Не совсем понятно, что не получается у вас. - Alexander Bashkin, Скрипты подключаются в head он есть на всех страницах. Действительно к старницам подключаются разные хедеры, но к тому и к другому скрипт подключен. Он подключается
<a href="https://www.vseunas.com/wp-content/themes/kraski/lightslider/js/settingsgallery.js"></a>
<a href="https://www.vseunas.com/wp-content/themes/kraski/lightslider/js/settingsgallery.js"></a>
Вот главная страница <a href="https://www.vseunas.com/"></a>На странице каталога - ваш метод в ссылке стоит просто # вот страница каталога
<a href="https://www.vseunas.com/tag/kras-int/"></a>
<a href="https://www.vseunas.com/tag/kras-int/"></a>
если нажимаю на пункт меню с # то перенаправления на страницу с нужным классном не происходит - это то чего я хочу добится. Удалось добится похожего эффекта если использовать якоря. Но тогда если ставим якорь в ссылку
1) переход слишком резкий. Читал что нужен хешь длч этого но не разобрался как настроить, пока борюсь.
2) появляется странный скрол на 20 пикселей справа, если переходим на якорь. Откуда,блин?((
Если сможете помочь по любому из двух вопросов буду рад. - Alexander Bashkin, да ка бы я мог написать проблем бы не было) пока гуглю спасибо за наводку.
Напиши функцию и выполняй её в двух случаях: страница загружена и/или клик по ссылке в меню.
вот тут не получается)
- solomonfox,
<Скрипты подключаются в head он есть на всех страницах/blockquote>
а должны подключаться перед закрывающий body, ибо возможно, что на момент выполнения скрипта, остальная страница ещё не загрузилась, соответсвенно ничего не происходит - Владислав Лысков, Alexander Bashkin, вроде все получилось, вызываю через id если кому то надо. Также добавил в css
body, html { scroll-behavior: smooth; }
body, html { scroll-behavior: smooth; }
В меню WP ссылка выглядит так:
https://www.vseunas.com/#kol-scrol
Если переходим с другой страницы на якорь вида id="kol-scrol"<div class="col-md-12 cont-about off-pd my-list"> <h2 id="kol-scrol" class="catalog-h"><?php the_field('kolerovka'); ?></h2> </div> $('.menu-item-1689').on('click', function() { $('html,body').animate({scrollTop: $('#kol-scrol').offset().top}, 1000); });
<div class="col-md-12 cont-about off-pd my-list"> <h2 id="kol-scrol" class="catalog-h"><?php the_field('kolerovka'); ?></h2> </div> $('.menu-item-1689').on('click', function() { $('html,body').animate({scrollTop: $('#kol-scrol').offset().top}, 1000); });
Осталась проблема. Если переходим на якорь содержимое всего сайта сдвигается влево и справа остаётся что-то похожее на полосу прокрукти.
Может кто знает почему так? - Почти сделал, правда с другим кодом. Решил проблему с отступами из комментов выше. Решил проблему с долгой загрузкой из соседней страницы. Вот почти рабочий код.
$(document).ready(function(){ $('body,html').scrollTop(0); $("#Menu-ID").on("click","a", function (event) { var id = $(this).attr('href'), top = $(id).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); }); var hash = location.hash; if($(hash).length){ var top = $(hash).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); } });
$(document).ready(function(){ $('body,html').scrollTop(0); $("#Menu-ID").on("click","a", function (event) { var id = $(this).attr('href'), top = $(id).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); }); var hash = location.hash; if($(hash).length){ var top = $(hash).offset().top -70; $('body,html').animate({scrollTop: top}, 1500); } });
Он замечательно работает с других страних, а со страницы главной не работает. #Menu-ID - ul эллемент где спрятаны все li с меню .
<ul id="Menu-ID" class="nav navbar-nav navbar-left"><li id="menu-item-1689" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1689 menu-item-style"><a href="https://www.vseunas.com/#kol-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Колеровка</a></li> <li id="menu-item-1690" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1690 menu-item-style"><a href="https://www.vseunas.com/#pr-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Наши проекты</a></li> <li id="menu-item-1691" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1691 menu-item-style"><a href="https://www.vseunas.com/#dost-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Доставка</a></li> <li id="menu-item-1692" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1692 menu-item-style"><a href="https://www.vseunas.com/#onas-scrol" aria-current="page" class="menu-item-style menu-item-style-active">О нас</a></li> <li id="menu-item-1693" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1693 menu-item-style"><a href="https://www.vseunas.com/#kont-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Контакты</a></li> <li id="menu-item-594" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-594 menu-item-style"><a href="/tag/kras-int/" class="menu-item-style">Каталог</a></li> </ul>
<ul id="Menu-ID" class="nav navbar-nav navbar-left"><li id="menu-item-1689" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1689 menu-item-style"><a href="https://www.vseunas.com/#kol-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Колеровка</a></li> <li id="menu-item-1690" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1690 menu-item-style"><a href="https://www.vseunas.com/#pr-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Наши проекты</a></li> <li id="menu-item-1691" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1691 menu-item-style"><a href="https://www.vseunas.com/#dost-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Доставка</a></li> <li id="menu-item-1692" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1692 menu-item-style"><a href="https://www.vseunas.com/#onas-scrol" aria-current="page" class="menu-item-style menu-item-style-active">О нас</a></li> <li id="menu-item-1693" class="menu-item menu-item-type-custom menu-item-object-custom active current_page_item menu-item-home menu-item-1693 menu-item-style"><a href="https://www.vseunas.com/#kont-scrol" aria-current="page" class="menu-item-style menu-item-style-active">Контакты</a></li> <li id="menu-item-594" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-594 menu-item-style"><a href="/tag/kras-int/" class="menu-item-style">Каталог</a></li> </ul>
На якоря просто перебрасывает без мягкого скрола. Где я ошибся?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы создать плавный скролл к якорю на новой странице, вам необходимо добавить небольшой JavaScript код. Для начала, у вас должен быть якорь на новой странице, к которому вы хотите прокрутить при загрузке страницы. Для этого вам нужно добавить атрибут id к элементу, к которому нужно прокрутить, например:
<a id="section1">Section 1</a>
Затем вам нужно добавить следующий JavaScript код в конец вашего HTML документа:
document.addEventListener('DOMContentLoaded', function() { var anchor = document.querySelector('#section1'); if(anchor) { anchor.scrollIntoView({ behavior: 'smooth' }); } });
Этот код будет искать элемент с id "section1" и плавно прокручивать страницу к этому элементу при загрузке страницы. Функция scrollIntoView() позволяет настроить поведение скролла, в данном случае мы используем параметр behavior со значением 'smooth', чтобы сделать скролл плавным.
Теперь, когда вы загрузите страницу, она автоматически прокрутится к указанному якорю с плавным эффектом. Не забудьте протестировать код в различных браузерах, так как поддержка smooth скролла может различаться.