I came across this useful blog Smoothly scroll to an element without a jQuery plugin
In the below code
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Auto scrolls down to target-element if sliderOn id exists within the body, but, because i have a fixed navbar the target-element goes behind it and cause not to show 20px of the target-element on top. Any solution here?
Try this:
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top - 20
}, 1000);
Related
How can i scroll page to bottom with JS ? I have problem about it. I need to scroll page to bottom until the load ends. When the page scrolled bottom, pages creates new elements so need to scroll one more time , one more time ... How can i automate it ?
You can use element.scrollIntoView() in order to scroll directly to the element that you want, here is an example you can use
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
this.stopScroll();
here is a link for documentation:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Try with this code to scroll bottom
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.
The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
I have a fixed menu at the top of my screen with 4 option, each option when clicked will scroll to a section within the page. The code I am using is as follows:
$("#click1").click(function (){
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
The scroll works as expected but when I click the options I get a flash of a white page. Has one else seen this and know any solution. Not sure if it's caused by the fixed menu element on the page.
I had this issue before. Try this:
$("#click1").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
Here is the jQuery API: http://api.jquery.com/event.preventdefault/
The site I'm working on has a "mandatory" Header at the top they won't let me remove. My workaround for this was to start the window scroll below that header with a body onLoad event, like such:
<body <?php body_class(); ?> onLoad="window.scroll(0, 100)">
The issue comes up as I'm working on the sites responsive elements. When the screen hits the 400px media query, I hide that div entirely. Which means my site is still scrolling 100px down needlessly.
Is there a way to Change that window.scroll event to NOT scroll down, (or to scroll down less if they make me put the header back on mobile, albeit smaller) based on that media query?
You can play around with this fiddle
JAVASCRIPT:
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 1000);
});
Basically it scrolls to the element you want to show so if the header is not present the #content top will be 0 so it won't scroll.
Alternatively, you could use the code below which will scroll the site accordingly to the header's height. No header = no height = problem solved.
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#header").height()
}, 1000);
});
Basically I have a docked footer on my site, which sits at the very bottom of the page. I then have an empty div "country_slider" which sits under it, and this can be expanded with jQuery's show and hide functions. The trouble is this, the footer div is already sitting at the bottom of the page via a CSS hack, so when the "country_slider" div expands, it simply goes off the bottom of the page.
I want the div to not only expand, but the page to also scroll down to make it visible. Can anyone tell me the easiest and most hack-free way of doing this?
This is the code I'm using to show the div:
$("#country_slide").show();
$("#country_slide").show(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});
without an animation:
$("#country_slide").show(function() {
$("html, body").scrollTop($(document).height());
});
Use:
$('#country_slide').show(function() {
$('html, body').animate({
scrollTop: $("#country_slide").offset().top
}, 2000);
});