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
78
This Month
436
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

Please dont do this! 😜


Unknown Web Developer