Универсальная плавная прокрутка страницы до якоря?

Question

[Роман]

Добрый день!

Помогите с написанием универсального скрипта, задача:

На сайте есть ссылки !разные, к примеру:
https://site.ru/page#link45
https://site.ru/to-page#link80
https://site.ru/my-page#link23

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

$(document).ready(function(){
	$('html,body').stop().animate({ scrollTop: $('#как-указать-якорь-он-разный').offset().top }, 1000);
	e.preventDefault();
});

на самой странице якорь, можно так или так, мне все равно

<a name="link45"></a>
или
<div id="link45"></div>

или я не в ту сторону вообще смотрю!?

Спасибо!

Answer 1

[Bowen]

$(window).on('load', function(){
	var top = $(window.location.hash).offset().top;
	$('html,body').stop().animate({
		scrollTop: top
	}, 1000);
});

Comments

[Роман]

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

[Bowen]

Роман Лазарев: Обновил ответ. Если даже это вас не устраивает, ставьте setTimeout

[Роман]

Спасибо, буду пробовать!

Answer 2

[seoman098]

$(document).ready(function() {

            //навигация - плавный скроллинг к якорю
            $("#nav_scroll").on("click","a", function (event) {
                //отменяем стандартную обработку нажатия по ссылке
                event.preventDefault();

                //забираем идентификатор бока с атрибута href
                var id  = $(this).attr('href'),

                //узнаем высоту от начала страницы до блока на который ссылается якорь
                    top = $(id).offset().top;

                //анимируем переход на расстояние - top за 1500 мс
                $('body,html').animate({scrollTop: top}, 1500);
            });

});

Comments

[Роман]

Этот код не отработает, проблема в том, что ссылки разные

[seoman098]

работает, с разными якорями - var id = $(this).attr('href')

[Роман]

Вы не поняли проблемы, вопрос в том, что ссылки, если из вашего примера, то они будут выглядеть так, под мои задачи, т.е nav_scroll+тут цифра и ссылки будут вести из одной страницы на другую с якорем, и якори всегда разные

https://site.ru/page#nav_scroll45
https://site.ru/to-page#nav_scroll80
https://site.ru/my-page#nav_scroll23

[seoman098]

Если это другая страница - то зачем вам скролл? Пусть сразу бросает на якорь. Лишние телодвижения в данном случае.

Answer 3

[GreatRash]

Проблема в том, что вам для начала надо ЧПУ на сайте реализовать. А там глядишь и скрипт заработает :)

Comments

[Роман]

ЧПУ работает, в чем проблема вы можете пояснить?

[GreatRash]

@RGBP Не видя сайта нет.

[Роман]

Ок, к примеру:

Страница remstroigrupp.ru/kontaktyi прокрутите ее в самый низ, в подвале с правой стороны есть отзывы на имя можно кликнуть, ссылка ведет на страницу отзывы с якорем на нужной отзыв

п.с. сайт переделывается, на дизайн/не заполненные страницы и т.д. пока не смотрим =)

[GreatRash]

Роман Лазарев: А что-то я там в коде якоря не вижу.

[GreatRash]

Роман Лазарев:

window.on('load', function() {
  var hash = location.hash;

  $('html, body').stop().animate({
    scrollTop: $(hash).offset().top
  }, 1000);
});

[Роман]

GreatRash: к примеру: remstroigrupp.ru/o-kompanii/otzyivyi#review63

<div class="col-md-12 col-sm-12 col-sm-12">
     <div id="review63"></div>
</div>

[GreatRash]

Роман Лазарев: Только $(window) вместо window, ну впрочем уже похожий ответ есть.

[Роман]

ага и setTimeout нужно сюда крутить, т.к. без задержки после загрузки страницы эффекта не увидишь! Хотя тоже не уверен, так как ты переходишь по ссылке с якорем. Экспериментировать нужно

[Bowen]

Роман Лазарев: Перейдите на SPA тогда, и будет вам счастье!

Answer 4

[trushka]

Из-за того, что страница после загрузки сама мгновенно прокручивается к якорю, я делал такой хак: якорь задаётся скрытым тегом (с display: none) перед нужным блоком, тогда при переходе по этой ссылке положение страницы не меняется, а при загрузке к ней не прокручивается. А для плавной прокрутки после загрузки - чючють переделаный код от Bowen

$(window).on('load', function(){
  var top = $(window.location.hash+'+*').offset().top;
  $('html,body').stop().animate({
    scrollTop: top
  }, 1000);
});

Кстати, можно и сначала на ready вызвать, а потом и на load, если есть вероятность, что из-за подгрузившихся картинок или скриптов блок может сдвинуться