Skip to content

Instantly share code, notes, and snippets.

@zackpyle
Created March 28, 2023 13:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zackpyle/3abeb0c1781a747a15f4352b76dad02f to your computer and use it in GitHub Desktop.
Save zackpyle/3abeb0c1781a747a15f4352b76dad02f to your computer and use it in GitHub Desktop.
A Button that scrolls the page down from section to section smoothly
// A Button that scrolls the page down from section to section smoothly
// Button needs to be positioned absolutely and design using css or a builder
// Here is the demo of this button in use https://youtu.be/_JZ9k0kT7yY?t=382
// Borrowed from https://github.com/thisbit/github_snippets/blob/main/js/scroll-down-button.js and converted to jQuery
jQuery(document).ready(function($) {
const $button = $('.carret-down');
const $sections = $('.custom-section');
function* goToNextSection(event) {
let i = 1, max = $sections.length;
while (true) {
yield event[i++];
i %= max;
}
}
const buttonClicked = goToNextSection($sections);
$button.on('click', function() {
$(buttonClicked.next().value).get(0).scrollIntoView({ behavior: "smooth", block: "center"});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment