Tap to smoothly scroll through each block using the animate() function

Question

Tap to smoothly scroll through each block using the animate() function

ul {
          padding: 0;
          margin: 0;
          height: 180px;
          overflow: auto;
        }
        li {
          height: 50px;
          background: pink;
          list-style: none;
          margin-bottom: 10px;
          height: 50px;
        }
        body {
          padding: 0;
          margin: 0;
        }

<ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
        <button>up</button>
        <button>down</button>

Is there a way to make the down button scroll block by block when clicked? I'm familiar with .animate() but I am unsure how to implement it for this specific functionality.

javascript jquery css

Answer 1

Answer №1

Here is a simple function I created to achieve this functionality without relying on any plugins. The code snippet using jQuery looks like this:

$('ul').animate({scrollTop:scrollValue});

You can see the working example on this fiddle.

Answer 2

Here is a simple function I created to achieve this functionality without relying on any plugins. The code snippet using jQuery looks like this:

$('ul').animate({scrollTop:scrollValue});

You can see the working example on this fiddle.

Answer 3

Answer №2

According to the suggestion made in the previous response, please refer to the following code snippet:

$('#up').click(function(){
$('ul').animate({ "scrollTop": "-=100"},'fast');
}); 
$('#down').click(function(){
$('ul').animate({ "scrollTop": "+=100"},'fast');
});

In addition to using fast, you can also use:

$('ul').animate({ "scrollTop": "+=100"},0);

The value of 0 in this case indicates no delay.

If you require a delay, please utilize the following code:

var scroll=0;
$('#up').click(function(){
    if(scroll<=0){
        scroll=0;
    }
    else{
        scroll = scroll - 60;
        $('ul').animate({ "scrollTop": scroll});
    }
}); 
$('#down').click(function(){
   if(scroll>=$(document).height() )
   {
       scroll=$(document).height();
   }
    else{
          scroll = scroll + 60;
          $('ul').animate({ "scrollTop": scroll});
        }
});

Answer 4

According to the suggestion made in the previous response, please refer to the following code snippet:

$('#up').click(function(){
$('ul').animate({ "scrollTop": "-=100"},'fast');
}); 
$('#down').click(function(){
$('ul').animate({ "scrollTop": "+=100"},'fast');
});

In addition to using fast, you can also use:

$('ul').animate({ "scrollTop": "+=100"},0);

The value of 0 in this case indicates no delay.

If you require a delay, please utilize the following code:

var scroll=0;
$('#up').click(function(){
    if(scroll<=0){
        scroll=0;
    }
    else{
        scroll = scroll - 60;
        $('ul').animate({ "scrollTop": scroll});
    }
}); 
$('#down').click(function(){
   if(scroll>=$(document).height() )
   {
       scroll=$(document).height();
   }
    else{
          scroll = scroll + 60;
          $('ul').animate({ "scrollTop": scroll});
        }
});

Tap to smoothly scroll through each block using the animate() function

Answer №1

Answer №2

Similar questions

When using node.js with MySQL, the insert statement with a WHERE clause does not execute properly

How to eliminate the added URL segment from the URL parameter when using $.ajax with jQuery

Backdrop styling for Material-UI dialogs/modals

React Hooks findByID method is throwing an error stating that it cannot read the property 'params' because it is undefined

Having trouble with the sleep function in nodejs?

Clicking on an embedded YouTube video will automatically redirect you to the video's

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error

How can we prevent floating li elements from overlapping the parent div element?

Incorporating a hamburger symbol into an established menu for easy navigation

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

tracking scroll position within div on main page

Using Perl to pass query information with ajax/json and including scalar reference for DBIx::Class

The filter() method in Jquery does not function properly when used with a class

Ways to display JSON data in Angular 2

Retrieving JSON information using JavaScript

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

Express Concurrency: Managing Multiple Tasks Simultaneously

Having trouble with ng-click in my AngularJS Restful application

Learn how to dynamically pass a value from a prop to a router-link in Vue.js

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?