@Kryptonit

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

я воспользовался этим кодом на jq:
$('a[href^="#"]').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 500);
    });

В общем он рабочий, но до каждого якоря крутится с разной скоростью, т.к. на всё про всё 0.5 сек, если у кого-то есть улучшиные аналоги, прошу поделиться, хочу, что б получилось как на этом сайте:
https://ru.wix.com/website-template/view/html/1885...
  • Вопрос задан
  • 167 просмотров
Пригласить эксперта
Ответы на вопрос 3
iiiBird
@iiiBird Куратор тега HTML
Пока ты спишь - твой конкурент совершенствуется
школьный курс математики. S = v*t
тебе нужна одинаковая скорость (v), значит тебе нужно подбирать правильное время (t, которое ты будешь вписывать в функцию animate) в зависимости от пути (S).
итого получаем формулу t = S/v;
вот и ищешь путь от нынешнего scrollTop до offset().top твоего элемента - это и будет (S).
ну а скорость уже сам подбираешь методом тыка.
Ответ написан
@Froggyweb
Если на Jquery, то примерно так
$('a[href*="#"]').click(function(e) {
  const $target = $(this.hash);
  const topOffset = 100;
  if ($target.length) {
    e.preventDefault();
    $("html, body")
      .stop()
      .animate(
        {
          scrollTop: $target.offset().top - topOffset
        },
        900,
        "swing",
        function() {
          history.pushState(
            {},
            document.title,
            window.location.pathname + target
          );
          return false;
          // window.location.hash = target;
        }
      );
  }
});
Ответ написан
Возможно, вам будет достаточно обойтись средствами CSS (набор свойств scroll-snap), если устроит браузерная поддержка. Несколько материалов по теме:
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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