Задать вопрос

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

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

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

Перепробовал много способов, которые нагуглил, но ни один не работает. Делаю все по инструкциям, но все равно не получается.
  • Вопрос задан
  • 84967 просмотров
Подписаться 18 Простой 4 комментария
Решения вопроса 1
Sergeniy
@Sergeniy
$(function(){

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

});
Ответ написан
Пригласить эксперта
Ответы на вопрос 9
BedwaRe
@BedwaRe
Пиши код
$("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 равный высоте фиксированного меню (опционально).
Ответ написан
Isolution666
@Isolution666
Full-Stack Developer
Такая конструкция подойдёт всем, у кого есть выпадающие меню с ссылкой
Чтобы не цеплять выпадающие меню и коллапсы, используйте класс или 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;
   });
});
Ответ написан
Комментировать
Комментировать
sokollondon
@sokollondon
Есть плагин jquery.scrollTo
$.scrollTo($('#some_point'), 500);

Настройка offset, например, если фиксированное верхнее меню:
$.scrollTo($('#some_point'), 500, {'offset':-100});


Вариант для всех якорей на странице:
$("body").on('click', '[href*="#"]', function(e){
    $.scrollTo($(this.hash), 500);
});
Ответ написан
Комментировать
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Кидайте ссылку на страницу, куда пытаетесь поставить свой плагин. ScrollTo - отличный вариант для человека, который не обладает нужными знаниями. Видимо делаете что-то неправильно. А что именно без кода Вам никто не скажет.
Ответ написан
Kikimer22
@Kikimer22
Junior Front-end Develope
$("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
Ответ написан
Комментировать
@kolbear
ещё вариант:
$('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 800);
return false;
});

как получилось тут - https://ibrain.com.ua/
Ответ написан
Комментировать
it_proger29
@it_proger29
Битрикс
$(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;
}
}
});
});
Ответ написан
Комментировать
Fortoo
@Fortoo
Top-Web OpenCart
Можно вообще не использовать 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); 
        }
	});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы