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

Question

[Александр К]

Здравствуйте.

Подскажите, как сделать плавную прокрутку до якоря на странице?

Перепробовал много способов, которые нагуглил, но ни один не работает. Делаю все по инструкциям, но все равно не получается.

Comments

[askomarov]

html {
scroll-behavior: smooth;
}

[Максим Борисенко]

askomarov, просто гений! Спасибо! и jq не нужен... Спасибо!

[illife]

спс

[DimDim7778]

askomarov, Спасибо! Работает)

Answer 1

[Sergeniy]

$(function(){

$('.some_link').on('click', function(e){
	$('html,body').stop().animate({ scrollTop: $('#some_point').offset().top }, 1000);
	e.preventDefault();
});

});

Comments

[Роман Мисюра]

Это простое и хорошее решение.

[AnomalyBNZ]

Спасибо, попробую =)

[nickostyle]

А как сделать на данном коде, чтобы some_point после окончания прокрутки упирался не в самый верх экрана, а на определенном расстоянии, к примеру 100px?

[keslo]

Спасибо. Пригодилось.

[MadMax90]

А если написать еще вот так, то будет рабоать на все ссылки в меню
$('.some_link').on('click', function(e){
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top }, 1000);
e.preventDefault();
});

[Sergeniy]

nickostyle: " $('#some_point').offset().top + 100px "

[script-bot]

сенк

Answer 2

[Дмитрий Сурин]

$("body").on('click', '[href*="#"]', function(e){
	var fixed_offset = 100;
	$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
	e.preventDefault();
});

Во-первых, асинхронно (например, у меня отзывы подгружались с другого сервиса, с задержкой несколько секунд). Во-вторых, для всех ссылок, которые содержат символ # (являются якорями). В-третьих, у меня в проекте было фиксированное меню сверху, поэтому при прокрутке прямо по якорю часть контента перекрывалась, для решения этой проблемы предлагаю установить fixed_offset равный высоте фиксированного меню (опционально).

Comments

[Sergeniy]

А что в вашем коде за асинхронность отвечает?

[Дмитрий Сурин]

Sergeniy: То как повешен обработчик. Я имел ввиду, что на момент выполнения кода ".some_link" может не существовать, т.к. подгружается позже. Учитывая что я опираюсь на "body", когда вешаю обработчик, мне всё-равно когда ".some_link" появится в DOM'e.

[Александр Янк]

у вас лучшее решение из представленных здесь.

[dicem]

Alex Lenk: дико плюсую, автор молодцина, а тот, что выбрали за решение, фуфло не рабочее.

[Spirit_ninja]

заработало только это

[Станислав]

У меня тоже скроллинг от этого кода заработал.
Есть вопрос последний. Скажите, пожалуйста, что поменять в коде чтобы якорь не прятался, а в адресной строке он менялся при нажатии на якорные ссылки?

[Дмитрий Сурин]

Станислав: Я не понял ваш вопрос. Что значит "чтобы якорь не прятался"? Если у вас при клике на ссылку с хешэм хеш не попадает в адресную строку, скорее всего это специфика работы вашего браузера.

[sidarvik]

Большое спасибо за универсальное решение! Работает как есть, не нужно ничего своего прописывать.

Answer 3

[Игорь Васильев]

Такая конструкция подойдёт всем, у кого есть выпадающие меню с ссылкой
Чтобы не цеплять выпадающие меню и коллапсы, используйте класс или id
который будет указывать на разрешение скролла

$("a.youe_class").click(function() { 
...
});

Такой подход подойдёт, если без разницы, если в ссылке решётка, или там ссылка, просто будет скроллить к нужному блоку с id

$("a").click(function() { 
...
});

<p><a href="#top">К началу страницы</a></p>
<section id="top">
...
</section>

$(document).ready(function() {
   var margin = 100; // переменная для контроля докрутки
   $("a").click(function() { // тут пишите условия, для всех ссылок или для конкретных
      $("html, body").animate({
         scrollTop: $($(this).attr("href")).offset().top+margin+ "px" // .top+margin - ставьте минус, если хотите увеличить отступ
      }, {
         duration: 1600, // тут можно контролировать скорость
         easing: "swing"
      });
      return false;
   });
});

Answer 4

[AlexRas]

frontblog.ru/plavnyij-yakor-jquery-plavnyij-perexo...

Answer 5

[sokollondon]

Есть плагин jquery.scrollTo
$.scrollTo($('#some_point'), 500);

Настройка offset, например, если фиксированное верхнее меню:

$.scrollTo($('#some_point'), 500, {'offset':-100});

Вариант для всех якорей на странице:

$("body").on('click', '[href*="#"]', function(e){
    $.scrollTo($(this.hash), 500);
});

Answer 6

[Юрий Лобанов]

Кидайте ссылку на страницу, куда пытаетесь поставить свой плагин. ScrollTo - отличный вариант для человека, который не обладает нужными знаниями. Видимо делаете что-то неправильно. А что именно без кода Вам никто не скажет.

Comments

[Александр К]

@iiil jobforgirl.ru/landingpage

[Jaty4]

@privetizkosmosa посмотрев на сайт и на код я понял что либо вы читать не умеете, либо вы не понимаете что нужно делать. на сколько я понял вы тупо скопипастили пример с документации ScrollTO и поэтому ничего не работает. вы вашем коде вы вешаете обработчик события клик на ссылку с классом 'one', но при этом всем у вас нету ссылок с классом 'one'

[Александр К]

@kulakowka это набросаный шаблон с не обработаным текстом, текст написан для того чтоб не было пусто. Там будет совершенно другой контент и конечно без опечаток =)

Answer 7

[Ruslan Salnikov]

$("a[href*=#]").on("click", function (e) {
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 777);
e.preventDefault();
return false;
});

а в хреф ссылки просто нужный id

Answer 8

[kolbear]

ещё вариант:
$('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 800);
return false;
});

как получилось тут - https://ibrain.com.ua/

Answer 9

[Владимир Куликов]

$(function(){
$('a[href*=#]').click(function() {
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) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);//скорость прокрутки
return false;
}
}
});
});

Answer 10

[Сергей Василенко]

Можно вообще не использовать ID
Вот мой пример https://qna.habr.com/q/556291#answer_item_2349276

А это пример с ID

$(document).ready(function() {
  //$("body").on('click', '[href*="#"]', function(e){ такой вариант НАДЁЖНЕЕ, когда динамически изменяется DOM
  $('a[href^="#"]').on('click', function(e) {
    // отменяем стандартное действие ссылки
    e.preventDefault();

    var sc = $(this).attr("href");
    var dn = $(sc).offset().top;
       // sc - в переменную заносим информацию о том, к какому блоку надо перейти
       // dn - определяем положение блока на странице

   $('html, body').animate({scrollTop: dn}, 1000);  
      // 1000 скорость перехода в миллисекундах
  });
});

Бывает, что при переходе по ссылке, загружается дополнительный контент,
тогда нужно дождаться загрузки и только потом перейти по ссылке- например перешли по ссылке а потом загружаются отзывы:

$("#review").load('index.php?route=blog/article/review&article_id={{ article_id }}', function(response, status, xhr) {
        if (status == "error") {
    	   var msg = " Извините, но произошла ошибка: ";
    	   $("#error").html(msg + xhr.status + " " + xhr.statusText);
        } else {
    	    var sc = window.location.hash;//ссылка с id (#answer_item_2349276)которую мы поймали на другой странице, например  (qna.habr.com/q/556291#answer_item_2349276)
            var dn = $(sc).offset().top;//определяем положение блока на странице 
            $('html, body').animate({scrollTop: dn}, 1000); 
        }
	});