Develop Reference

Scroll to top using jquery not working?

I have this piece of jquery to scroll the page up to the top. It's not scrolling at all.
I've tested it using an alert() and it is triggering - so why isn't it scrolling to the top?
$(document).on("click",'.campaign-stats', function(event) {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Please note that the page does contain content inserted using AJAX, but I don't see how that would stop it scrolling to the top?

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 scroll to bottom of element not top

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

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