Как на Wordpress при нажатии кнопки перемещаться на активный экран меню?

Question

[Norum]

как сделать так, чтобы при нажатии на кнопку меню, экран опускался на соответствующий блок. Например, нажал на Контакты, экран плавно спустился к этому блоку, нажал на Новости, экран спустился на блок новостей

Answer 1

[Alex]

No-no-no. jQuery тут нафиг не нужен.

1. Достаточно ставить стандартные якоря. Вы же знаете, что такое якорь в html? И всё. Функционал уже работает.
   
2. Дополнительно можно повесить Element.scrollIntoView() чтобы скролить "плавно" (на бумаге красиво, на практике больше бесит).
   

И всё. Минимум JS. Но, что важно, даже без JS функционал будет работать.

И плагины вам никакие сверху не нужны.
Не перегружайте сайт херней, ради функционала, который можно руками сделать за 2 минуты.

Comments

[Pavstyuk]

Ключевой момент был в том, чтобы это было плавно.

[Pavstyuk]

О. Нашел, как сделать плавно.

var elmnt = document.getElementById("content");
elmnt.scrollIntoView({behavior: "smooth"});

[Norum]

Pavstyuk, я нашел решение на одному форуме, но не понимаю, как оно работает. Можете объяснить?

$("body").on('click', '[href*="#"]', function(e){
  var fixed_offset = 100;
  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
  e.preventDefault();
});

[Pavstyuk]

Norum, Рекомендую это справочник изучить от начала до конца. Все станет гораздо понятнее.
https://www.w3schools.com/jquery/default.asp

Answer 2

[Daria Motorina]

Это вопрос из области фронтенда.
Самый простой способ - сделать это на jQuery, ищите "jquery плавная прокрутка к якорю" (jquery smooth scroll to anchor href). Код надо добавить в шаблон своей темы на вордпрессе

Comments

[Norum]

я нашел решение на одному форуме, но не понимаю, как оно работает. Можете объяснить?

$("body").on('click', '[href*="#"]', function(e){
  var fixed_offset = 100;
  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
  e.preventDefault();
});

[Daria Motorina]

Norum, ну можно постараться разобраться с каждой функцией по отдельности, тогда станет понятно)

Answer 3

[Pavstyuk]

Вот так у меня работает универсальный код на JQuery:

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var target = this.hash;
        var $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;
        });
    });

Comments

[Norum]

Я хочу, чтобы у меня было вот так https://yadi.sk/i/rBn-qBpqjupa6Q