Posted in jquery
23
12:25 am, June 23, 2021

scroll down the page using a button click

scrolling down 600px from where you currently are on the screen

demo vid

HTML

<h3>Scroll with animation</h3>
<p>this one will scroll using the animate function to give it a bit of extra movement</p>
<button class='btn btn-primary scroll-me'>Scroll Me!</button>

<h3>Scroll with no animation</h3>
<p>unless the document already has smooth scroll on it, as this site uses bootstrap it already has a smooth scroll on it, so it just uses that one. </p>
<button class='btn btn-primary scroll-me-2'>Scroll Me Jump!</button>

Javascript

$(document).ready(function(){
  $( ".scroll-me" ).click(function() {
    var x = $(window).scrollTop();
     $('html, body').animate({ scrollTop: x + 600 }) 
  });
  $( ".scroll-me-2" ).click(function() {
    var x = $(window).scrollTop();
    $(window).scrollTop(x+600);
  });
});

Scroll with animation

this one will scroll using the animate function to give it a bit of extra movement

Scroll with no animation

unless the document already has smooth scroll on it, as this site uses bootstrap it already has a smooth scroll on it, so it just uses that one.

View Statistics
This Week
101
This Month
278
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown