Use jQuery to smoothly scroll a div

Question

Use jQuery to smoothly scroll a div

I created a container using a <div> element which is divided into 3 inner divs. The first two inner divs are meant to serve as previous and next buttons, with ids of prev and next respectively. At the bottom, there are 3 more inner divs, each with unique ids of diva, divb, and divc. Both divb and divc have their widths set to 0 in order to keep them hidden, while only diva is visible initially. My goal is to hide diva by setting its width to 0, then display divb when the user clicks on the element with id of "next". If the same button is clicked again, I intend for divb to be hidden and for divc to become visible. This process should also be reversible if the element with id of "prev" is clicked.

For a visual representation of my description, refer to the image below:

This link contains a fiddle showcasing this concept.

javascript jquery css

Answer 1

Answer №1

Using a class, I have implemented the necessary functionality for you. Click on this DEMO to see it in action.

Here is the complete code snippet:

var $pages = $('.page');
$('#nxt').click(
  function() {
    var $cur = $('.active');       //retrieve current active element
    var $next = $cur.next();       //get the next element after the current one

    /*
     * Insert your logic inside the following if statement to go back 
     * to the first div.
    */
    if ($next.length == 0) return; //if there is nothing in the next element, exit the function.

    $cur.removeClass('active');    //remove the active class from the current active element
    $next.addClass('active');      //set the next element as the new active element

    //animate all elements except the one with the 'active' class (which is the next element)
    $('.page').not('.active').animate({"width": 0}, "slow"); 

    //animate the current element (which was set as the next one)
    $('.active').animate({"width": 200}, "slow");
});

$('#prev').click(
  function() {
    var $cur = $('.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    $cur.removeClass('active');
    $prev.addClass('active');

    $('.page').not('.active').animate({"width": 0}, "slow");
    $('.active').animate({"width": 200}, "slow");
});

Answer 2

Using a class, I have implemented the necessary functionality for you. Click on this DEMO to see it in action.

Here is the complete code snippet:

var $pages = $('.page');
$('#nxt').click(
  function() {
    var $cur = $('.active');       //retrieve current active element
    var $next = $cur.next();       //get the next element after the current one

    /*
     * Insert your logic inside the following if statement to go back 
     * to the first div.
    */
    if ($next.length == 0) return; //if there is nothing in the next element, exit the function.

    $cur.removeClass('active');    //remove the active class from the current active element
    $next.addClass('active');      //set the next element as the new active element

    //animate all elements except the one with the 'active' class (which is the next element)
    $('.page').not('.active').animate({"width": 0}, "slow"); 

    //animate the current element (which was set as the next one)
    $('.active').animate({"width": 200}, "slow");
});

$('#prev').click(
  function() {
    var $cur = $('.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    $cur.removeClass('active');
    $prev.addClass('active');

    $('.page').not('.active').animate({"width": 0}, "slow");
    $('.active').animate({"width": 200}, "slow");
});

Answer 3

Answer №2

View this demo on JSFiddle: http://jsfiddle.net/3yrsu/1/

An additional custom attribute named 'current' has been introduced to monitor the current slide. Furthermore, a class has been included for easy identification of the slides.

Here is the HTML structure:

<div class="scroll">
    <div class="buttons">
        <a id="prev">Previous</a>
        <a id="middle">Test</a>
        <a id="nxt">Next</a>
    </div>
    <div id="diva" class="slide" current="1">div AA</div>
    <div id="divb" class="slide">div BB</div>
    <div id="divc" class="slide">div CC</div>
</div>

The JavaScript implementation is as follows:

$('#nxt').click(
function() {

    var current = $('.slide[current="1"]');
    var next = current.next('.slide');
    var prev = current.prev('.slide');
    if(next.length == 0) {
        next = $('.slide').first().insertAfter(current);
    }
    if(prev.length == 0) {
        prev = $('.slide').last().insertBefore(current);
    }

    current.animate({"width": 0}, "slow");
    next.animate({"width": 200}, "slow");
    prev.animate({"width": 0}, "slow");

    $('.slide').removeAttr('current');
    next.attr('current', "1");

});

$('#prev').click(
function() {

    var current = $('.slide[current="1"]');
    var next = current.prev('.slide');
    var prev = current.next('.slide');

    if(next.length == 0) {
        next = $('.slide').last().insertBefore(current);
    }
    if(prev.length == 0) {
        prev = $('.slide').first().insertAfter(current);
    }

    current.animate({"width": 0}, "slow");
    next.animate({"width": 200}, "slow");
    prev.animate({"width": 0}, "slow");

    $('.slide').removeAttr('current');
    next.attr('current', "1");

});

Answer 4

View this demo on JSFiddle: http://jsfiddle.net/3yrsu/1/

An additional custom attribute named 'current' has been introduced to monitor the current slide. Furthermore, a class has been included for easy identification of the slides.

Here is the HTML structure:

<div class="scroll">
    <div class="buttons">
        <a id="prev">Previous</a>
        <a id="middle">Test</a>
        <a id="nxt">Next</a>
    </div>
    <div id="diva" class="slide" current="1">div AA</div>
    <div id="divb" class="slide">div BB</div>
    <div id="divc" class="slide">div CC</div>
</div>

The JavaScript implementation is as follows:

$('#nxt').click(
function() {

    var current = $('.slide[current="1"]');
    var next = current.next('.slide');
    var prev = current.prev('.slide');
    if(next.length == 0) {
        next = $('.slide').first().insertAfter(current);
    }
    if(prev.length == 0) {
        prev = $('.slide').last().insertBefore(current);
    }

    current.animate({"width": 0}, "slow");
    next.animate({"width": 200}, "slow");
    prev.animate({"width": 0}, "slow");

    $('.slide').removeAttr('current');
    next.attr('current', "1");

});

$('#prev').click(
function() {

    var current = $('.slide[current="1"]');
    var next = current.prev('.slide');
    var prev = current.next('.slide');

    if(next.length == 0) {
        next = $('.slide').last().insertBefore(current);
    }
    if(prev.length == 0) {
        prev = $('.slide').first().insertAfter(current);
    }

    current.animate({"width": 0}, "slow");
    next.animate({"width": 200}, "slow");
    prev.animate({"width": 0}, "slow");

    $('.slide').removeAttr('current');
    next.attr('current', "1");

});

Answer 5

Answer №3

I made adjustments to your HTML code by adding the classes "current" and "page". Here is the updated HTML:

<div class="scroll">
   <div class="buttons">
       <a id="prev">prev</a>
       <a id="middle">test</a>
        <a id="nxt">next</a>
    </div>
    <div id="diva" class="current page">div AA</div>
    <div id="divb" class="page">div BB</div>
    <div id="divc" class="page">div CC</div>
</div>

Please update your JavaScript code as follows:

$(document).ready(function() {
   $('#nxt').click(function() {
    var $cur = $('.current');
    var $next = $cur.next();
    if ($next.length == 0) 
       return false;

    $cur.removeClass('current');
    $next.addClass('current');

    $('.page').not('.current').animate({"width": 0}, "slow");
    $('.current').animate({"width": 200}, "slow");
  });

  $('#prev').click(function() {
     var $cur = $('.current');
     var $prev = $cur.prev('.page');

     if ($prev.length == 0) 
       return false;

     $cur.removeClass('current');
     $prev.addClass('current');

     $('.page').not('.current').animate({"width": 0}, "slow");
     $('.current').animate({"width": 200}, "slow");
  });
 });

You can view a working demo here.

I hope this helps! :)

Answer 6

I made adjustments to your HTML code by adding the classes "current" and "page". Here is the updated HTML:

<div class="scroll">
   <div class="buttons">
       <a id="prev">prev</a>
       <a id="middle">test</a>
        <a id="nxt">next</a>
    </div>
    <div id="diva" class="current page">div AA</div>
    <div id="divb" class="page">div BB</div>
    <div id="divc" class="page">div CC</div>
</div>

Please update your JavaScript code as follows:

$(document).ready(function() {
   $('#nxt').click(function() {
    var $cur = $('.current');
    var $next = $cur.next();
    if ($next.length == 0) 
       return false;

    $cur.removeClass('current');
    $next.addClass('current');

    $('.page').not('.current').animate({"width": 0}, "slow");
    $('.current').animate({"width": 200}, "slow");
  });

  $('#prev').click(function() {
     var $cur = $('.current');
     var $prev = $cur.prev('.page');

     if ($prev.length == 0) 
       return false;

     $cur.removeClass('current');
     $prev.addClass('current');

     $('.page').not('.current').animate({"width": 0}, "slow");
     $('.current').animate({"width": 200}, "slow");
  });
 });

You can view a working demo here.

I hope this helps! :)

Use jQuery to smoothly scroll a div

Answer №1

Answer №2

Answer №3

Similar questions

"An error was thrown due to an illegal invocation while utilizing $.post, although $.ajax seems to be

What is the process for integrating npm packages with bower?

Obtaining the width of a child table using Jquery

When the property "a" is set to true, it must also require the properties "b" and "c" to be included

Incorporating a for loop, ExpressJS and Mongoose repeatedly utilize the create method to generate

What could be causing the background color opacity of the HTML hr tag to decrease?

Using Rails and ajax to dynamically choose where a partial should be rendered

Searching for all choices within a select dropdown using Selenium and Python

Do you always need to use $scope when defining a method in Angular?

Issue with Material-ui Autocomplete: onChange event not firing when value is updated in onHighlightChange

Converting HTML to PDF using AngularJS

Looking for assistance with an Angular2 post request?

Arranging a div's position in relation to an unrelated div

Looking to locate the child div elements within a parent div

Switching images with the hover effect using jQuery

Creating a Vue.js component with dynamic data

The MuiThemeProvider.render() function requires a valid React element to be returned, or null if necessary

What is the best way to limit the top margin for a fixed element?

Restricting the length of dynamic dropdowns in a React application

Only the initial upload file is being passed through the Apollo Express server, with the remaining files missing in action