Плавная прокрутка (скрол) - простой якорь на jquery

Столкнулся с проблемой плавной прокрутки для якорей на сайте. В интернете есть масса решений, но все они либо очень закручены, либо для каждой ссылки нужно добавлять класс и подобную кашу.

И так, нашел скрипт который автоматически сделает ваши якоря прокруткой. Пример использования:

<a href="#id1">Наша ссылка</a>

<div id="#id1">
    наш блок
</div>

<a href="#id1">Наша ссылка</a>

наш блок

</div>

И добавляем jquery скрипт.

<script type="text/javascript"> 
    jQuery(document).ready(function() {
         setup_slight_scroll_to_anchors();
        
         function setup_slight_scroll_to_anchors() {
             jQuery('a[href^="#"]').click(function() {
                 var link = jQuery(this);
                 if (link.attr('href') == '#') return;
                 var target = link.attr('href');
                 var target_top = jQuery(target).offset().top;
                 jQuery('html, body').animate({
                    scrollTop: target_top
                 }, 1000);
                 return false;
             });
         }
    });
</script>

jQuery(document).ready(function() {

setup_slight_scroll_to_anchors();

function setup_slight_scroll_to_anchors() {

jQuery('a[href^="#"]').click(function() {

var link = jQuery(this);

if (link.attr('href') == '#') return;

var target = link.attr('href');

var target_top = jQuery(target).offset().top;

jQuery('html, body').animate({

scrollTop: target_top

}, 1000);

return false;

});

}

});

</script>

Что бы назначить скрол конкретному меню, добавьте класс вашего меню перед a[href^=”#”]
Что бы изменить скорость прокрутки, меняйте значение 1000 (1 сек.)

Готово, теперь все якорные ссылки будут автоматически прокручиваться (скролить) к нужному вам месту.

Плавная прокрутка (скрол) – простой якорь на jquery

Залишити відповідь Скасувати коментар