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

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

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

Перепробовал много способов, которые нагуглил, но ни один не работает. Делаю все по инструкциям, но все равно не получается.
  • Вопрос задан
  • 80314 просмотров
Решения вопроса 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
творческая личность
Такая конструкция подойдёт всем, у кого есть выпадающие меню с ссылкой
Чтобы не цеплять выпадающие меню и коллапсы, используйте класс или 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;
   });
});
Ответ написан
Комментировать
Комментировать
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
Ответ написан
Комментировать
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 - отличный вариант для человека, который не обладает нужными знаниями. Видимо делаете что-то неправильно. А что именно без кода Вам никто не скажет.
Ответ написан
@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
Немного подробнее распишу
$(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 скорость перехода в миллисекундах
  });
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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