I've got three divs of 100% height that make up a page. At the bottom of the first page, a button scrolls down 100% of the $(window).height. This scrolls the second div completely into view.
$('.arrowdown').click(function(){
$("html, body").animate({ scrollTop: $(window).height()}, 1000);
return false;
});
I've got the same button at the bottom of the second div (I want it to scroll the third div completely in to view).
At the moment I've got:
$('.arrowdowncontent').click(function(){
$('html,body').animate({ scrollTop: $('#jobs').offset().top }, 1000);
return false;
});
Aaaaaaah! Help appreciated. :)
Related
Here is my script:
$(document).ready(function () {
$('div').animate({
scrollTop: $('#content').offset().top
}, 'slow');
});
What I want is, the scroll should go at the bottom of the div. Is it possible?
"What I want is, the scroll should go at the bottom of the div"
Now you scroll to the top of the div, because offset().top calculates, where this div starts. If you want to scroll to the bottom of the div, you can simply add the height of the div too, like this:
scrollTop: $('#content').offset().top + $('#content').height()
I have this code which is supposed to smooth scroll to an anchor on the page whenever an tag is clicked. However, this code does not scroll smoothly but instead jumps to the div.
$('a[href*="#"]:not([href="#"])').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
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?
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");
});
});
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);
});