As shown in the image, how can i find the scrolled height relative to DIV not to window
Edit
Uploaded another image for more clearity
You should use .position() instead of .offset(). That's the offset relative to the parent. (in jQuery of course)
documentation
I'm actually not sure if this is what you are looking for...
may be try to find div position and than set your body in document.ready
var position = $("divid").offset().top;
$("html, body").animate({ scrollTop: position },'slow');
Hops its helps
Related
I've something like an image gallery on my site. By clicking an image this one will scale up. Sometimes the enlargement contains that a part of the image is out of the viewport. Is it possible that the complete site jumps to the top area of the image by clicking it?
You can have a look here!
Try this:
$("div.image img").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
It should create a click event for all the images inside the div element with a class "image", which I can see in your code, and then animate (slowly, in 2000 miliseconds, aka 2 seconds) scroll to it's offset from the top of the page.
You have more information in this 5 year old question on stackoverflow.com
edit:
if you need some adjustment, you can edit this line
scrollTop: $(this).offset().top - 88
and the page will scroll 88px less than the image position, which you could find helpful because of your floating menu.
I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.
jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/
So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});
You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.
I have simple JS function that's animate page scroll to selected anchor by id
all anchor in my page have different offset value and position
tip: I user masonry effect
but does not work correctly
function scrollToAnchor(aid) {
var aTag = $("a[id='" + aid + "']");
$('html,body').animate({ scrollTop: aTag.position().top }, 'slow');
}
You should use offset instead of position().
But I know by experience that Masonry by default doesn't use position absolute & top, left but it uses a css3-transform instead. And this means that .left and .top will output 0 instead of the css3-transform-value.
I have Created an Example Page Below:
http://glustik.com/glustik2/index.html
When you Click the First Two Links you can see how the Anchors Position to the top and not down (250 or so Pixels).
Is there a way to summon the anchors to a certain location on the window?
Thanks.
You can use the jQuery animate function to set the scrollTop to the wanted position.
$("html, body").animate({ scrollTop: $("#your-div").offset().top - YourHeadersHeight }, 500);
I would like a div to appear and slide down once you scroll pass the header.
Here's what it should look like:
http://www.space.com/11425-photos-supernovas-star-explosions.html
Here's what I got so far but it's not working.
http://jsfiddle.net/nHnrd/
You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.
For example:
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;
Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.
You might want to just show and hide your div rather than pseudo class AND hide and show
initially:
$("#mydiv").hide();
then (on scroll):
$("#mydiv").show();
set what you want your div to look like i.e. 0,0 and fixed
Use the Keep It Simple method!
I've updated your jsfiddle with something you can try.
Try this:
http://jsfiddle.net/nHnrd/10/
Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/