Develop Reference

Scroll to section in HTML/CSS

if I have the following JS code:
//Scroll Down button
$(window).scroll(function () {
if ($(this).scrollDown() > 100) {
$('.containerScroll').fadeIn('slow');
} else {
$('.containerScroll').fadeOut('slow');
}
});
$('.containerScroll').click(function () {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
This basically is for the Back-top-button animation where if the user clicks the button, then it brings the user back to the homepage with smooth scrolling. I would like the opposite. Is there a way to modify the above JS code so that when the user clicks the button, it brings the user to whichever page they desire? Right now, this scrolls all the way to the top and brings the user to only the homepage of the website, but how can I make it so it would bring the user to whichever page on the website?
This is what I have in HTML file:
<a href="#about" class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</a>
Basically, I would like the user to go in the about section of the page instead of the homepage. Any suggestions on how to achieve this task?

You can set the scrollTop value to the offset of whatever element you want. For example:
$('html, body').scrollTop($('#about').offset().top);
will set scrollTop to the top of the element with id about by getting its offset.
Or you could use animate as you did in your example:
$('html, body').animate({
'scrollTop': $('#about').offset().top
}, 1500);
Fiddle
Fiddle smooth scroll

to top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
to element
const element = getElementById("someElement");
//you can do it by jquery. no matter
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
MDM: scrolIntoView
MDM: scrollTo

jQuery Smooth Scroll to Top AND to Anchor by ID (with Offset)

this is an extension to a questions that was previously answered here: See Prevoius Question
I have a bit of jQuery that is adding BOTH a smooth scroll to top function, AND a smooth scroll to any anchor found on a page.
Now, I just need to add an offset to the anchor scroll (110px) to account for fixed headers, WITHOUT messing up the scroll to top function.
Here's the existing code:
// Add To Top Button + Smooth Scroll to Anchors functionality
jQuery(document).ready(function($){
// Scroll (in pixels) after which the "To Top" link is shown
var offset = 700,
//Scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//Duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//Get the "To Top" link
$back_to_top = $('.to-top');
//Visible or not "To Top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('top-fade-out');
}
});
//Smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
targetedScroll();
});
// example of smooth scroll to h2#anchor-name
$('#some-button').on('click', function(event) {
event.preventDefault();
targetedScroll('anchor-name');
});
// bind smooth scroll to any anchor on the page
$('a[href^="#"]').on('click', function(event) {
event.preventDefault();
targetedScroll($(this).attr('href').substr(1));
});
// scrolling function
function targetedScroll(id) {
// scrollTop is either the top offset of the element whose id is passed, or 0
var scrollTop = id ? $('#' + id).offset().top : 0;
$('body,html').animate({
scrollTop: scrollTop,
}, scroll_top_duration);
}
});

Any time your're scrolling to an element, you have to scroll lower than the element by the height of the fixed navbar. Similarly, the first element on the page needs a margin or padding to offset by the height of the navbar.
Since both of these offsets are the same, you can set the offset for scrolling at the same time you set the offset for the first element. When you're scrolling to an element, subtract the offset from the height from the top. This will still work even when scrolling to the top.
jQuery(document).ready(function($) {
var offset = $("nav").height();
$("body").css("padding-top", offset + "px");
$('a[href^="#"]').click(function(event) {
event.preventDefault();
var scrollY = $(this.href).offset().top;
$('html, body').animate({
scrollTop: scrollY - offset
}, 2000);
});
});

Smooth horizontal scrolling of large background images

at the website klangmanufaktur.de we have a horizontal scrolling design (on desktop screens). However, on some subpages there are large background images and scrolling is not smooth at all (when clicking the horizontal arrows):
www.klangmanufaktur.de/impressionen/
This is especially true for Safari.
The images are loaded using tags, but are changed to background images within a large using DOM manipulation with jQuery. There are to issues:
1. No smooth scrolling
2. Background images load only when scrolled into the viewport, so for a short moment, the black background is visible
Here is the code for horizontal scrolling on arrow click:
// horizontal scrolling on arrow click
$('.horizontal-arrow.right').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$('.pagebox-inner').each(function(){
if($(this).offset().left>window.pageXOffset + $(window).width() - $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
$('.horizontal-arrow.left').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$($('.pagebox-inner').get().reverse()).each(function(){
if($(this).offset().left<window.pageXOffset + $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
And here is the code for scrolling when a submenu link is clicked, like here:
www.klangmanufaktur.de/restaurierung
// horizontal scrolling of anchor links
$('nav.main-navigation li a').each(function(){
if($(this).attr('href')!=$(this).attr('href').replace('#','')) {
$(this).click(function(){
currentMainHash = window.location.hash;
var linkUrlSplit = $(this).attr('href').split("#");
var currElem = $('#post-'+linkUrlSplit[linkUrlSplit.length-1]);
if(currElem) {
if($(window).innerWidth()>767) $('body,html').animate({ scrollLeft: currElem.offset().left - $('header.site-header').outerWidth() }, 2000,'swing',function(){ scrolled = false; });
else $('body,html').animate({ scrollTop: currElem.offset().top }, 2000,'swing',function(){
scrolled = false;
$(this).blur();
});
}
$('.currentLink').removeClass('currentLink');
$(this).addClass('currentLink');
});
}
});
Any suggestions how to resolve the "unsmooth scrolling" issue here? Is it maybe helpful do display the images as elements instead of background images?
Thanks for your help!
Kind regards
joschi81

Set scrollbar to zero (once) after toggle a div appearing from top (push down) like Airbnb

i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.
When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.
Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)
This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)
jQuery(document).on('click', '.flip', function(e){
e.preventDefault();
jQuery(".panel").slideToggle("slow");
});
$(window).scroll(function(){
if($(this).scrollTop() > 630) $('.panel').hide();
if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
});
Hope to hear from you guys,
cheers Joeri

Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/
Hope you means like this.
JQUERY
$(document).ready(function () {
// scroll to top and show top content
$('#show_top_bar').on('click',function(){
$('html, body').stop().animate({
scrollTop: 0
}, 300, function() {
$('#top_bar').slideDown(300);
});
});
// hide top content on click close icon
$('#close_top_bar').on('click',function(){
$('#top_bar').slideUp(100);
});
});
$(window).scroll(function() {
// hide top content when scroll position is top of content
if($(this).scrollTop() > $('#content').position().top){
if($('#top_bar').css('display') !== 'none') {
$('#top_bar').slideUp(0);
$('html, body').stop().animate({
scrollTop: 0
}, 0 );
}
}
});

Scroll to the top of the page after a sequence of divs

The code I have scrolls through a sequence of divs, each called .container. Each .container has a 100% height, so the user ends up quite far down the page as a result.
Now I am trying to scroll back to the top (using the same .container class) once the user reaches to the bottom of the page.
$('.down').click(function (e) {
var next_container = $(this)
.next(container);
$('html, body')
.animate({
scrollTop: next_container.offset().top
}, 'slow');
});
Is there way for the jQuery to detect that the user is at the bottom of the document, and as a result, scroll to the first .container (rather than the next)?

You can check that there is a next container found. If not, go to the first one:
$('.down').click(function (e) {
var next_container = $(this).next(container);
if (!next_container.length) {
next_container = $(container).first();
}
$('html, body').animate({
scrollTop: next_container.offset().top
}, 'slow');
});
This is assuming your container variable is a string with the selector of the element, ie. ".container"