Jquery Expanding div - How to scroll to it - javascript

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

Related

Scroll animation scrolls down only at some point

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()

jQuery auto scroll to elements

I came across this useful blog Smoothly scroll to an element without a jQuery plugin
In the below code
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Auto scrolls down to target-element if sliderOn id exists within the body, but, because i have a fixed navbar the target-element goes behind it and cause not to show 20px of the target-element on top. Any solution here?

Try this:
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top - 20
}, 1000);

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?

scrollTop animation caused white flash of screen

I have a fixed menu at the top of my screen with 4 option, each option when clicked will scroll to a section within the page. The code I am using is as follows:
$("#click1").click(function (){
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
The scroll works as expected but when I click the options I get a flash of a white page. Has one else seen this and know any solution. Not sure if it's caused by the fixed menu element on the page.

I had this issue before. Try this:
$("#click1").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
Here is the jQuery API: http://api.jquery.com/event.preventdefault/

jQuery scroll to top of div

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. :)

Categories

Resources