Плавный переход к section для одной ссылки в меню, как реализовать?

Question

[Alexander Kovalenko]

День добрый. Есть сайт echo-nvrsk.ru
В верхнем меню ссылка "Instagram" опускает к разделу инстаграма на главной странице.
Как сделать переход плавным я знаю, но нужно затрагивать весь блок (в данном случае это #top3) и тогда остальные ссылки перестают работать.
Можно вручную в коде прописать ссылку, сделав для неё отдельный блок и прописать его в скрипте - до этого я додумался.
А как-нибудь ещё можно обойти такой костыль? :)

Comments

[Vadim Kinev]

Нужен просто плавный скролл?

[Alexander Kovalenko]

Vadim Kinev, да

[Vadim Kinev]

Alexander Kovalenko, Попробуйте этот js

$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},1000),!1}})});

Answer 1

[Анатолий Куликов]

Нужно чуть переработать скрипт. Если там используется jQuery, то вот так:

$(function(){
  $("a[data-jump^='#']").click(function(){
    var _href = $(this).attr("data-jump");
    $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
    return false;
  });
});

В случае с чистым js’сом можно на ссылку навесить слушатель с таким событием:

// пусть item - это объект ссылки
item.addEventListener('click', () => {
   document.getElementById(blockId).scrollIntoView({
        block: "center",
        behavior: "smooth"
    });
})

Главное, что укажи ссылку на блок в дата-атрибуте, типа вот так: https://jsfiddle.net/anatolykulikov/Ld0p6tsr/20/