i am trying to scroll the page to the ajax loader gif in the page on the click of a link.
As shown below i am trying to scroll to the div with id "divWaitImage"
However scrollTop used below is not working when given the variable offs as parm.
var offS = $("#divWaitImage").offset().top;
$('html, body').animate({ scrollTop: offS}, 'slow');
However it works if i pass in a hardcoded value:
$('html, body').animate({ scrollTop: 500}, 'slow');
Can anyone please point out the error or a workaround , i am sure its something that i have missed.
thanks for any pointers in advance!
According to your current question this might be a good approach.
http://jsfiddle.net/rRsM4/1/
This is not true -> You need to make sure that you have a height set in the parent container. You can remove the height.
Updated version: http://jsfiddle.net/floradu88/rRsM4/2/
Html:
<div style="height:1500px;">
<img src="http://linux.m2osw.com/sites/linux.m2osw.com/files/images/waiting-wheel-300x300.gif" alt="image" style="margin-top:1000px;" id="divWaitImage"/>
</div>
JS:
var offS = $("#divWaitImage").offset().top;
$('html, body').animate({ scrollTop: offS}, 'slow');
P.S. I will update the answer if you provide updates to your question.
Related
I have a page where there many are a loop of posts with description and images.
then I used this function to scroll to element
$('html, body').animate({
scrollTop: $(".entry" + vm.note).offset().top + 200
}, 1000);
the probleme is sometimes I scrolled to go element and sometimes not.
I dont know why.
PS: I using angularJS
It might be the DOMs are still rendering and it can't calculate the exact top distance from body/html to the element(".entry"+vm.note) you want to scroll.
You might try to put a delay before you execute your code using timeout.
setTimeout(function(){
$('html, body').animate({
scrollTop: $(".entry" + vm.note).offset().top + 200
}, 1000);
}, 3000); //set it longer if it's still not scrolling
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've asked for help in regards to a scroll identifier and now have this code working perfectly:
http://codepen.io/vsync/pen/Kgcoa
However, I was wondering how I can get it so when I click the links on the black scrollbar I can get it to scroll to that part of the page. I think it would be something along these lines:
$(".a1").click(function() {
$('html, body').animate({
scrollTop: $("#a1").offset().top
}, 2000);
});
The scroll identification bit of the JavaScript has been so refined that I was really hoping there would be an elegant and optimised way to make it so they can skip to bits of the page too.
Try this.
$("nav span").click(function() {
var sectionId = $(this).attr('class')
$('html, body').animate({
scrollTop: $('#'+sectionId).offset().top
}, 2000);
});
Fiddle Demo
My code scrolls the user to the bottom of the page:
var $elem = $('body');
$('html, body').animate({scrollTop: $elem.height()}, 800);
How can it be modified to take the user to the part of the page where there is a h3 tag with the id "myTitle":
<h3 id="myTitle">Hello</h3>
How about:
var $elem = $("#myTitle");
$('html, body').animate({scrollTop: $elem.offset().top}, 800);
using .offset().
Here's a working example: http://jsfiddle.net/naTjL/
You can get the offset of the element from the top:
var position = $("#myTitle").offset().top;
You can then use that as the value to scroll to.
This is a brilliant example
That even works with JS turned off. Additionally this adds the #myTitle to the URL allowing bookmarking.
$('html, body').scrollTop($("#myTitle").offset().top)
I want to animate a scroll effect to take a user to the top of the page when clicking on an element. A bit like anchoring to the top of the page but smoother.
I've seen this done (can't remember where though).
Does anyone know how this can be done?
You want to .animate() the scrollTop property to 0, like this:
$("html, body").animate({ scrollTop: 0 }, 500);
you can try this:
$('#somewhere').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
You can put this code on document load, for example to animate to top
$("html, body").animate({ scrollTop: 0 }, 1000);
And you can animate to an especific element, like
$("html, body").animate({ scrollTop: $('.my-element').offset().top }, 1000);
I have used Ariel Flesler's localscroll plugin to do this many times... http://demos.flesler.com/jquery/localScroll