What is the best method for navigating to the next div element with Javascript?

Question

What is the best method for navigating to the next div element with Javascript?

Currently designing a website filled with Divs set to 100% height. I am working on creating a button that, when clicked, smoothly scrolls to the next div on the page. Below is the snippet of code I have written to achieve this functionality:

$(".next").click(function() {
    $('html,body').animate({
        scrollTop: $(".p2").offset().top},
        'slow');
});

body{
  margin: 0;
  height: 100%;
}

.p1{
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}
.p2{
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}
.p3{
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin{
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
  
</div>
<div class="p2">
  
</div>
<div class="p3">
  
</div>

<div class="admin">
  
  <button class="next">NEXT</button>
  
</div>

javascript jquery html css

Answer 1

Answer №1

In order to successfully implement this functionality, you must first determine which div is currently being displayed. You can achieve this by assigning a class to the active element and then use the next() method to navigate through all elements.

It's also important to note the inclusion of a shared class, .p, on all elements in the example below. This not only helps streamline the CSS code but also simplifies DOM traversal.

$(".next").click(function() {
  var $target = $('.p.active').next('.p');
  if ($target.length == 0)
    $target = $('.p:first');
    
  $('html, body').animate({
    scrollTop: $target.offset().top
  }, 'slow');

  $('.active').removeClass('active');
  $target.addClass('active');
});

body {
  margin: 0;
  height: 100%;
}

.p {
  height: 100vh;
  width: 70%;
}
.p1 {
  background-color: #2196F3;
}
.p2 {
  background-color: #E91E63;
}
.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
  <button class="next">NEXT</button>
</div>

Answer 2

In order to successfully implement this functionality, you must first determine which div is currently being displayed. You can achieve this by assigning a class to the active element and then use the next() method to navigate through all elements.

It's also important to note the inclusion of a shared class, .p, on all elements in the example below. This not only helps streamline the CSS code but also simplifies DOM traversal.

$(".next").click(function() {
  var $target = $('.p.active').next('.p');
  if ($target.length == 0)
    $target = $('.p:first');
    
  $('html, body').animate({
    scrollTop: $target.offset().top
  }, 'slow');

  $('.active').removeClass('active');
  $target.addClass('active');
});

body {
  margin: 0;
  height: 100%;
}

.p {
  height: 100vh;
  width: 70%;
}
.p1 {
  background-color: #2196F3;
}
.p2 {
  background-color: #E91E63;
}
.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
  <button class="next">NEXT</button>
</div>

Answer 3

Answer №2

Ensure each container has the same class name. Begin with the first element and on each click, target the next scroller element.

var f = $('.p1');
var nxt = f;
$(".next").click(function() {

  if (nxt.next('.scroller').length > 0) {
    nxt = nxt.next('.scroller');
  } else {
    nxt = f;
  }
  $('html,body').animate({
      scrollTop: nxt.offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

.p1 {
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}

.p2 {
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}

.p3 {
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1 scroller">

</div>
<div class="p2 scroller">

</div>
<div class="p3 scroller">

</div>

<div class="admin">

  <button class="next">NEXT</button>

</div>

Answer 4

Ensure each container has the same class name. Begin with the first element and on each click, target the next scroller element.

var f = $('.p1');
var nxt = f;
$(".next").click(function() {

  if (nxt.next('.scroller').length > 0) {
    nxt = nxt.next('.scroller');
  } else {
    nxt = f;
  }
  $('html,body').animate({
      scrollTop: nxt.offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

.p1 {
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}

.p2 {
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}

.p3 {
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1 scroller">

</div>
<div class="p2 scroller">

</div>
<div class="p3 scroller">

</div>

<div class="admin">

  <button class="next">NEXT</button>

</div>

Answer 5

Answer №3

Here's a simplified version that seamlessly transitions to the first slide after reaching the last one. We are keeping track of the current slide using the variable currSlide, and updating it internally within the function.

To streamline the process, I assigned a slide class to each slide, enabling me to:

easily determine the total number of slides
optimize the CSS

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
$(".next").click(function() {
  currSlide = currSlide === SLIDE_LENGTH ? 1 : ++currSlide;
  $('html,body').animate({
      scrollTop: $(`.p${currSlide}`).offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

/* Avoid repetitive styles */
.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="next">NEXT</button>
</div>

jsFiddle

Bonus Update:

If you wish to include a previous button in the future...

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;

function moveSlide() {
  currSlide = $(this).hasClass("next") ? ++currSlide : --currSlide;
  if (currSlide < 1) {
    currSlide = SLIDE_LENGTH;
  }
  if (currSlide > SLIDE_LENGTH) {
    currSlide = 1;
  }
  $('html,body').animate({
      scrollTop: $(`.p${currSlide}`).offset().top
    },
    'slow');
}

$(".prev, .next").on("click", moveSlide);

body {
  margin: 0;
  height: 100%;
}

/* Avoid repetitive styles */

.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="prev">PREVIOUS</button>
  <button class="next">NEXT</button>
</div>

jsFiddle

Answer 6

Here's a simplified version that seamlessly transitions to the first slide after reaching the last one. We are keeping track of the current slide using the variable currSlide, and updating it internally within the function.

To streamline the process, I assigned a slide class to each slide, enabling me to:

easily determine the total number of slides
optimize the CSS

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
$(".next").click(function() {
  currSlide = currSlide === SLIDE_LENGTH ? 1 : ++currSlide;
  $('html,body').animate({
      scrollTop: $(`.p${currSlide}`).offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

/* Avoid repetitive styles */
.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="next">NEXT</button>
</div>

jsFiddle

Bonus Update:

If you wish to include a previous button in the future...

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;

function moveSlide() {
  currSlide = $(this).hasClass("next") ? ++currSlide : --currSlide;
  if (currSlide < 1) {
    currSlide = SLIDE_LENGTH;
  }
  if (currSlide > SLIDE_LENGTH) {
    currSlide = 1;
  }
  $('html,body').animate({
      scrollTop: $(`.p${currSlide}`).offset().top
    },
    'slow');
}

$(".prev, .next").on("click", moveSlide);

body {
  margin: 0;
  height: 100%;
}

/* Avoid repetitive styles */

.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="prev">PREVIOUS</button>
  <button class="next">NEXT</button>
</div>

jsFiddle

Answer 7

Answer №4

If you're wondering how to achieve this in JavaScript, I'll provide a brief vanilla JS solution for scrolling:

var p = 1;
const container = document.getElementById('container');
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  container.scrollTo({top: topPos, behavior: 'smooth'});
}

In the code snippet above, replace page with the class name you assign to the div elements you want to scroll to, like so:

<div id="container">
  <div class="page p1"></div>
  <div class="page p2"></div>
  <div class="page p3"></div>
</div>

If you need to scroll the entire browser window instead of just a container, switch

container.scrollTo({top: topPos, behavior: 'smooth'});

to

window.scrollTo({top: topPos, behavior: 'smooth'});

For example:

var p = 1;
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  window.scrollTo({top: topPos, behavior: 'smooth'});
}

You can adjust the topPos offset to fine-tune the scrolling position as needed.

Answer 8

If you're wondering how to achieve this in JavaScript, I'll provide a brief vanilla JS solution for scrolling:

var p = 1;
const container = document.getElementById('container');
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  container.scrollTo({top: topPos, behavior: 'smooth'});
}

In the code snippet above, replace page with the class name you assign to the div elements you want to scroll to, like so:

<div id="container">
  <div class="page p1"></div>
  <div class="page p2"></div>
  <div class="page p3"></div>
</div>

If you need to scroll the entire browser window instead of just a container, switch

container.scrollTo({top: topPos, behavior: 'smooth'});

to

window.scrollTo({top: topPos, behavior: 'smooth'});

For example:

var p = 1;
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  window.scrollTo({top: topPos, behavior: 'smooth'});
}

You can adjust the topPos offset to fine-tune the scrolling position as needed.

What is the best method for navigating to the next div element with Javascript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript and CSS Modal showing incorrect data

Is there a specific minimum height that should be set for the equalHeight function to apply?

What is the best way to add a value to a textbox?

Encountered an issue while mounting Vue component that was attempting to loop through itself: Component could not be mounted due to

I'm unable to modify the text within my child component - what's the reason behind this limitation?

Is there a way to extract an array from a property value within an object using JavaScript?

Tips for parsing a JSON object efficiently

Tips for showcasing boxed numerical characters on a website

Can a VS Code theme extension be designed using JavaScript or TypeScript rather than JSON?

What is the best way to apply different styles to alternative children within a dynamically generated list?

PHP code to display or conceal tables

Tips for utilizing external data sources in React-Native collapsible/accordion components

Attempting to save data to a .txt file using PHP and making an AJAX POST request

Error: Unrecognized HTML, CSS, or JavaScript code detected in template

Obtain the closest numerical range using JavaScript

Best practices for efficiently utilizing setInterval with multiple HTTP requests in NodeJS

What are the steps for converting a structured text document into a SQL table?

Verify whether the current location is within the circle

Using curly brackets as function parameters

What is the best approach to implementing a filter in Vue 2 that is also compatible with Vue 3?