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

Update an existing item or add a new one if it is not already present

Is there a way to bring together scrolling effects and mouse movement for a dynamic user

AngularJS - Create Alert Pop-Up for Missing Input Fields

Using Angular Ionic for a click event that is triggered by a specific class

Is there a way to include the site_path define('SITE_PATH','http://127.0.0.1/project/'); in a jQuery URL?

How can I display a calendar with a complete month view using ng-repeat?

Iterate through the xml.documentElement in a loop

"Using JavaScript to trigger a button click event, and then

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

Is it possible to incorporate a 960 grid system into a div container?

Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

Tips for creating precise dots on a polished slideshow

Having trouble converting JSON into a JavaScript object

The resizing of the window does not trigger any changes in the jQuery functions

javascriptcode to execute before loading google maps

How to position an absolute element beneath a fixed element

The grid elements are not in perfect alignment

What are some strategies for preventing unused setState functions in React? Is it possible to create a React useState without a setter function

I am a newcomer to Stack Overflow and I am facing difficulty in getting my form to submit successfully

JavaScript string: Use regex to find and replace with position index