jQuery scroll to bottom of element not top - javascript

I am using the following to scroll to an element
$("html, body").animate({
scrollTop: $('selector').offset().top
}, 500);
The above code places the element at the top of the browser window when scrolled to it, is there a way I can scroll to the element with the scroll ending with the element at the bottom of the browser window?


Try something like this to put the scroll at the bottom of the element
$("html, body").animate({
scrollTop: $('selector').offset().top + $('selector').outerHeight(true)
}, 500);
Or this to put the element at the bottom of the scroll:
$("html, body").animate({
scrollTop: $('selector').offset().top + $('selector').outerHeight(true) -$(window).height()
}, 500);


You could use the height of the window to calculate your scroll position

Related

ScrollTop Freezing Scroll

I'm using this to scroll the page to bottom smoothly:
$("html, body").animate({ scrollTop: $("html, body").height()}, "slow");
But it's freezing my scroll (i'm not able to scroll to top...)
Any idea?
Thanks

how to keep scroll bar always to bottom of page

to keep scroll bar always at the bottom of the page i used
$(document).ready(function() {
$(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
It is working in the Firefox but it is not working in the chrome.
Why it is not working in the chrome can anybody suggest me the good solution to keep the scroll bar always at the bottom of the page.
Thanks for any help

If you want to move back to the bottom of the page even if the user attempts to scroll up, you are going to need to call your function on an interval.
$(document).ready(function() {
function scrollBottom(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
}
setInterval(scrollBottom, 500);
});
You can play with the interval to get the desired amount of UI interactivity.
Alternatively, you could bind to the scroll event, this will fire whenever the user scrolls.
$(document).ready(function() {
$(window).scroll(function(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});

How to use scrollTop in jquery when linking to a new page

I have the following code to smoothly scroll between links on a single page:
$(".navbar .nav a").bind('click',function(event){
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - (90) + "px"
}, {
duration: 1200,
easing: "easeInOutExpo"
});
return false;
event.preventDefault();
});
This works fine when the links are clicked on the same page. However, when they are linked to exernally:
The offset doesn't apply; and
The page doesn't scroll.
I would like to fix this by navigating to the new page, starting at the top and then scrolling down to the anchor. How can I achieve this?

Jquery Expanding div - How to scroll to it

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);
});

jquery - Animated return to top of page on click

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

Categories

Resources