Posted in jquery
278
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

scroll down the page using a button click Demo

View Demo Full Screen View Demo New Tab

scroll down the page using a button click Code

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);
  });
});

Related Tags

No Items Found.

Add Comment
Type in a Nick Name here