How to use scrollTop?

Question

My page is divided into sections, each section is a div in the size of the screen (100%).

Every section must have a button to scroll down a full screen to the next section.

I am able to scroll one window down, without completely understanding what I do, and how to be able to keep scrolling to next section from every given section.

function nextButton() {

  $('html, body').animate({
     scrollTop:  $(window).height() 
 }, 1000);


}

`jQuery('html,body').animate({scrollTop:0},0);` if you want to reach on top of the page. — Kaushik, Feb 21 '19 at 06:39
thanks, I cant understand what is a "top" that i see everywhere ? I would like to scroll down, not up, a top means up for my intuition. Am I wrong ? — Curnelious, Feb 21 '19 at 06:40
You could use `anchor scrolling` which requires you to add tags to the individual div. [Existing solution](https://stackoverflow.com/questions/8579643/how-to-scroll-up-or-down-the-page-to-an-anchor-using-jquery). — varun agarwal, Feb 21 '19 at 06:41
As I described in the question, the page have sections, each section is a div in the size of a screen. I would like to be able to move from div to div. (which mean every div has a button to scroll down a full screen height to the next div). — Curnelious, Feb 21 '19 at 06:42

score 1 · Accepted Answer · answered Feb 21 '19 at 06:44

That parameter scrollTop is the value determined by calculating the height from top of your browser to the point you want to scroll to.

In the code you provided you are scrolling down for 1 window height by $(window).height() so if you want to scroll to next section (I assume each section has height equal 1 window) you need to multiplies it.

function scrollToSection(sectionNumber) {

  $('html, body').animate({
     scrollTop:  $(window).height() * sectionNumber 
 }, 1000);


}
// so if you want to scroll to your first section you call this
scrollToSection(1) // and so on

score 1 · Answer 2 · answered Feb 21 '19 at 06:45

Define a common class your divs (ex: sections)

// Maintain the current div where the last scroll was performed
var index = 0;

function nextButton() {
  index += 1;
  var divSections = $('.sections');

  // Check to see if more divs exist
  if (!divSections[index]) return;

  $('html, body').animate({
     scrollTop:  divSections[index].offset().top
 }, 1000);


}

score 1 · Answer 3 · answered Feb 21 '19 at 06:46

You can just use some jQuery smooth scrolling by adding IDs to each div element:

$("html,body").animate({scrollTop: myDiv.offset().top}, "slow");

Adding an event listener for a click or a scroll, and using this as the event handler, will give you what you want.

score 0 · Answer 4 · answered Feb 21 '19 at 06:50

Try to give each div an id and your button add a anchor tag and reference it in which div you want to target. Then to have animate effect on your CSS add scroll-behaviour: smooth.

<div id="#section-one"></div>
<div id="#section-two"></div>
<a href="#section-one" class="button"/>
<div id="#section-three"></div>
<a href="#section-two" class="button"/>

html {
  scroll-behavior: smooth;
}

How to use scrollTop?

4 Answers4