Скроллинг по блокам во всю высоту экрана. Требуется ли плагин, или есть возможность написать кусок кода самостоятельно?

Question

[flare0n]

Имею такую структуру кода

<div class="block">
	   	<header class="header">...</div>
                <div class="slider">...</div>
		<section class="main">...</section>
        </div>
	<div class="features">...<div>

Требуется при нажатии на блок, либо клике по какой-либо кнопке скроллить страницу вниз до следующего блока. Высота каждому блоку уже установлена, однако я очень плох в JS коде.

Comments

[Сергей delphinpro]

https://yandex.ru/search/?clid=9582&text=scrollto&...
https://yandex.ru/search/?text=fullpage%20js&lr=51...

[flare0n]

Сергей delphinpro, Спасибо, последний вопрос - как отключить "карусель" в фуллпейдже?

[Сергей delphinpro]

flare0n, не помню. давно не использовал фуллпейдж. но уверен, что ответ есть в документации.

Answer 1

[spnq]

Подобный вопрос бы на - https://stackoverflow.com/questions/47910737/scrol...

Если кратко переводить -

• Каждому div даем id

  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>

  
  
• Дальше пишем функцию:
  

  $( document ).ready(function() {
      var divs = ["first", "second", "third"];
      var counter = 0;
  });
  
  function cycle(element) {
      $(element).attr("href", divs[counter]);
      if(counter < divs.length - 1) {
          counter++;
      }
      else {
          counter = 0;
      }
  }

  
  
  
• И, например, делаем какой-нибудь div c этой функцией по клику, в href ставим id нужного div
  

  <div><a onclick="cycle(this);" href="#first_div"></a></div>

  
  
  

Comments

[flare0n]

Можно как-нибудь прикрутить анимацию к функции?

[spnq]

Погугли smooth scrolling, есть много разных вариантов, очень просто делается.

[flare0n]

Константин Соколов, Какой код не нахожу - все в пустую, либо ломается проект из-за неопределенной переменной или же просто не работает, может... предложите готовый фрейм?

[flare0n]

flare0n, Уже не нужно, нашел CSS код:

html {
  scroll-behavior: smooth;
}