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

Question

[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...

Comments

[dedstriger]

В css пропиши
html{
scrool-behavior: smooth;
}

Answer 1

[iBird Rose]

школьный курс математики. S = v*t
тебе нужна одинаковая скорость (v), значит тебе нужно подбирать правильное время (t, которое ты будешь вписывать в функцию animate) в зависимости от пути (S).
итого получаем формулу t = S/v;
вот и ищешь путь от нынешнего scrollTop до offset().top твоего элемента - это и будет (S).
ну а скорость уже сам подбираешь методом тыка.

Comments

[Kryptonit]

да ты я смотрю гений, а ничего , что формула посложнее? ну так примерно SX=X1+SV0+at^2/2

[iBird Rose]

Kryptonit, не знаю о чем именно ты, но в ответе я имею виду это https://school-assistant.ru/?predmet=matematika&th...

[Kryptonit]

iBird Rose, знаю о чём ты, но мне нужны ответы не школьников, а людей разбирающихся

[iBird Rose]

Kryptonit, только хотел скинуть фиддл по этой формуле. ок. передумал

[Kryptonit]

iBird Rose, раз передумал незачем было писать, на может поможет https://bingoschool.ru/blog/81/ тоже школьный курс

[iBird Rose]

Kryptonit, в вопросе ты написал, чтобы скорость была одинаковой. это формула "Равномерное движение" на твоем же скинутом сайте.
как раз x0 = начальной позиции на экране, а x = offset().top твоего target.
формула, которую ты сам скинул - это вариация Равномерного ускоренния. но ты сам сказал, что ускорение тебе не нужно.

[Kryptonit]

iBird Rose, долго писаться не по-делу? Если решение есть скидывай, если нет не трать моё время.

[Пашенька]

Kryptonit, тебе всё правильно написали: нужно передавать динамический расчёт длительности(времени) в функцию .animate, если задача стоит в том, чтобы с равномерной скоростью перемещаться по якорям.
А также написали правильную формулу для этого.

Answer 2

[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;
        }
      );
  }
});

Comments

[Kryptonit]

никакой разницы

[Kryptonit]

я не знаток jq, но я так понимаю, что код абсолютно аналогичен в плане работы, не могли бы вы разъяснить в чём отличия?

[Froggyweb]

Используется выборка элементов с помощью jq к примеру

Answer 3

[Павел Ловцевич]

Возможно, вам будет достаточно обойтись средствами CSS (набор свойств scroll-snap), если устроит браузерная поддержка. Несколько материалов по теме:

• Умная прокрутка со Scroll Snap Points
  
• Practical CSS Scroll Snapping
  
• Well-Controlled Scrolling with CSS Scroll Snap