RGBPlus
@RGBPlus
... web это будущее

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

Добрый день!

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

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


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

Спасибо!
  • Вопрос задан
  • 9529 просмотров
Пригласить эксперта
Ответы на вопрос 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, если есть вероятность, что из-за подгрузившихся картинок или скриптов блок может сдвинуться
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽
28 февр. 2021, в 18:31
4000 руб./за проект
28 февр. 2021, в 17:59
500 руб./за проект
28 февр. 2021, в 17:56
16000 руб./за проект