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

Добрый день!

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

На сайте есть ссылки !разные, к примеру:
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>


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

Спасибо!
  • Вопрос задан
  • 10061 просмотр
Пригласить эксперта
Ответы на вопрос 5
Bowen
@Bowen
Геймер в отставке
$(window).on('load', function(){
	var top = $(window.location.hash).offset().top;
	$('html,body').stop().animate({
		scrollTop: top
	}, 1000);
});
Ответ написан
@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);
            });

});
Ответ написан
@GreatRash
Проблема в том, что вам для начала надо ЧПУ на сайте реализовать. А там глядишь и скрипт заработает :)
Ответ написан
maxminimus
@maxminimus
просто или ничего
как вариант - elem.scrollIntoView()
но тут css transition не прикрутить

как вариант иммитируй скрол через translate контента относительно родительского контейнера
- но это тоже сомнительно, надо думать
Ответ написан
Комментировать
trushka
@trushka
Из-за того, что страница после загрузки сама мгновенно прокручивается к якорю, я делал такой хак: якорь задаётся скрытым тегом (с display: none) перед нужным блоком, тогда при переходе по этой ссылке положение страницы не меняется, а при загрузке к ней не прокручивается. А для плавной прокрутки после загрузки - чючють переделаный код от Bowen
$(window).on('load', function(){
  var top = $(window.location.hash+'+*').offset().top;
  $('html,body').stop().animate({
    scrollTop: top
  }, 1000);
});
Кстати, можно и сначала на ready вызвать, а потом и на load, если есть вероятность, что из-за подгрузившихся картинок или скриптов блок может сдвинуться
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы