Posted in
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
39
This Month
278
This Year
0
Add Comment
Other Items in jquery
load json data url with jquery
validate email address from string with jquery working function
mouse enter mouse leave jquery hover hoverout
simulate a click on an element with jquery
append a #link to the end of all href urls on a target
scroll down the page using a button click
check if a ul contains a ul li
jquery check if a sub element exists
jquery toggle menu testing
json load from jquery and loop through the results
json jquery ajax request
add click event to multiple link items and load the link content into a target div ajax
add click event to multiple link items
Uncaught TypeError: $(...).slideToggle is not a function
jquery page search [testing]
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
add a jquery date picker to your text box
replicating the bootstrap dropdown toggle in jquery
using jquery appear for checking if an element is visible on screen
fix for Uncaught TypeError: e.indexOf is not a function
add a class or remove it based on window scroll location
find and replace hrefs in existing page links using jquery
get the href value using jquery
jquery document ready with foundation init as well
jquery add a click function if the window size is greater than target_width
jquery enable and disable attribute
jquery click function
Change link target with JQuery
document ready wordpress jquery
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress