Как создать плавный скрол к якорю на новой странице?

Question

[solomonfox]

Мой код по клику на класс .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});
});

Answer 1

[solomonfox]

Получилось сделать прикладываю готовый код

$(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.

Answer 2

[Alexander Bashkin]

$('.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);
});

Comments

[solomonfox]

Работает только на главной. Если перехожу на стороннюю старницу ничего не работает. Или что указывать в ссылке в меню, чтобы работало и на сторонней странице? Сайт на wp все подключается частями в том числе и меню.

[Alexander Bashkin]

solomonfox, если вы вставляете этот скрипт только на главной странице, то конечно так и будет. Нужно вставить таким образом, чтобы на всех страницах он был.
В любом случае, не хватает подробностей.

upd: невнимательно прочитал. Нужно делать якоря блокам в ссылках. И по клику на любой a в меню обрабатывать. То есть они должны ввести на главную страницу, а по якорю ты будешь определять до какого блока скроллить.
Таким образом, находясь на другой странице, ты сначала переходишь на главную и после этого делаешь то, что выше. Напиши функцию и выполняй её в двух случаях: страница загружена и/или клик по ссылке в меню.
В общем и целом на SO ответ с галочкой описывает то, что нужно. Не совсем понятно, что не получается у вас.

[solomonfox]

Alexander Bashkin, Скрипты подключаются в head он есть на всех страницах. Действительно к старницам подключаются разные хедеры, но к тому и к другому скрипт подключен. Он подключается

<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>

если нажимаю на пункт меню с # то перенаправления на страницу с нужным классном не происходит - это то чего я хочу добится. Удалось добится похожего эффекта если использовать якоря. Но тогда если ставим якорь в ссылку
1) переход слишком резкий. Читал что нужен хешь длч этого но не разобрался как настроить, пока борюсь.
2) появляется странный скрол на 20 пикселей справа, если переходим на якорь. Откуда,блин?((
Если сможете помочь по любому из двух вопросов буду рад.

[solomonfox]

Alexander Bashkin, да ка бы я мог написать проблем бы не было) пока гуглю спасибо за наводку.

Напиши функцию и выполняй её в двух случаях: страница загружена и/или клик по ссылке в меню.

вот тут не получается)

[Владислав Лысков]

solomonfox,

<Скрипты подключаются в head он есть на всех страницах/blockquote>
а должны подключаться перед закрывающий body, ибо возможно, что на момент выполнения скрипта, остальная страница ещё не загрузилась, соответсвенно ничего не происходит

[solomonfox]

Владислав Лысков, Alexander Bashkin, вроде все получилось, вызываю через id если кому то надо. Также добавил в css

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);
});

Осталась проблема. Если переходим на якорь содержимое всего сайта сдвигается влево и справа остаётся что-то похожее на полосу прокрукти.
Может кто знает почему так?

[solomonfox]

Почти сделал, правда с другим кодом. Решил проблему с отступами из комментов выше. Решил проблему с долгой загрузкой из соседней страницы. Вот почти рабочий код.

$(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>

На якоря просто перебрасывает без мягкого скрола. Где я ошибся?