Можно ли без использования ссылок как-то скроллить страницу на сайте?

Question

[Genri_Rus]

Доброго времени суток!

Допустим у меня есть 4 section

<section id="s-1">
<section id="s-2">
<section id="s-3">
<section id="s-4">

И есть 4 навигационных списка

<ul>
        <li data-nav="s-1"></li>
        <li data-nav="s-2"></li>
        <li data-nav="s-3"></li>
        <li data-nav="s-4"></li>
</ul>

С помощью js можно ли как-то их объединить, чтобы при клике на определенную li можно было обращаться к id section ?

Answer 1

[Rustam Bainazarov]

Если примитивно на jQuery, то вот:

$(document).on('click', "ul li", function() {

  let elementID = $(this).attr("data-nav");

  $('html, body').animate({
    scrollTop: $("#" + elementID + "").offset().top
  }, 700);

});

Comments

[Genri_Rus]

Круто, спасибо Вам большое !

А вот допустим, если скроля на каком-то блоке останавливается, то добавлять для него класс active
Это нужно проверку сделать offset() ?

[Rustam Bainazarov]

Genri_Rus, да, там надо делать проверки и пр. и вешать это на событие прокрутки.

[Genri_Rus]

Рустам Байназаров, типа так ?

$(window).scroll(function(){
     if (elementID.offset().top) {
        $('section').addClass('active');
     } else {
        $('section').removeClass('active');
    }
});

Это нужно внутри клика ?

[Genri_Rus]

Рустам Байназаров, я извиняюсь, но мне нужно кнопкам добавлять класс active

[Rustam Bainazarov]

Genri_Rus, если просто кнопками:

[Genri_Rus]

Рустам Байназаров, спасибо Вам огромное!

Как я говорил, но я не правильно выразился

Мне нужно у кнопок менять фон при скроллинге и соответственно при клике

[Rustam Bainazarov]

Genri_Rus, я сам для этого пользовался вот этим плагином:
imakewebthings.com/waypoints

[Genri_Rus]

Рустам Байназаров, а без плагина это сложно реализовать ?

[Rustam Bainazarov]

Genri_Rus, в данном случае, наверное, больше нет, чем да, но я не особо знаю, как это сделать хорошо.

Answer 2

[Борис Черепанов]

Можно и без jquery, если кому-то надо то вот