JQuery ScrollTop glitches with fadeIn and fadeOut - javascript

I'm getting this horrible glitch (it sort of jumps or flashes) when using animate scrolltop with fadeIn and fadeOut. I've got a Div which is dynamically loaded with content. When the user clicks a menu button on the main page the page should scroll to the top and then begin to fadeout the div, then update the div with it's new content and then fade back in.
It works fine half the time but the other half it glitches out. I tried firefox, chrome and opera and they all have the same behavior.
function loadPage(url)
{
$("html, body").animate({ scrollTop: 0}, 500);
setTimeout(function (){ $('#centerBox').load(url); }, 1000);
$('#centerBox').fadeOut(1000);
$('#centerBox').fadeIn(1500);
}
Code Explanation:
So the above function will be called when a menu button is clicked. The main page will scroll to the top. The div's content has a timer so that's content is changed after the fadeout has fully completed but changed in enough time to be ready for the fadein.
I'm calling the loadPage(url) function using this:
<img src="buttons/newsWhite.png"/>

Try changing it to this instead:
function loadPage(url)
{
$("html, body").animate({ scrollTop: 0}, 500, function(){
$('#centerBox').fadeOut(1000, function(){
$('#centerBox').load(url, function(){
$('#centerBox').fadeIn(1500);
});
});
});
}
This will not load the url until the fadeOut animation is completed.

I seem to have solved my issue here.
$(document).ready(function(){
$('#news').click(function(){
$("html, body").animate({ scrollTop: 0}, 500, function(){
$('#all').fadeOut(1000, function(){
$('#centerBox').load('news.html', function(){
$('#all').fadeIn(1500);
});
});
});
return false;
});
});
I then called this using:
<img src="buttons/newsWhite.png" width="130" height="25"/>
I'm new to JavaScript and JQuery (as you can probably tell), do you think it could have something to do with not using document.ready()?

Related

JQuery animate scrollTop doesnt work in one page

I cant solve why animate doesnt work only on one page.
Here is Link: https://tachomaster.pl
For test I add little gray sqaure on the left top corner, if you click this, script should scroll you a little down. As you can see it doesnt work only on main page, on any other it works.
Here is testing script:
$(document).on('click', '.test', function(event){
event.preventDefault();
$('body').animate({
scrollTop: 500
}, 800);
});
you need to hide overflow for all the containers under your body tag
I fix that by changing from
$('body').animate({
scrollTop: 500
}, 800);
to
$('html, body').animate({
scrollTop: 500
}, 800);
I completly dont know why it works that way and didnt work first way ONLY on main page.

Automatic scroll to top on „next page"

Example URL
Here's my issue: When I resize the browser (approx. 320 px width), scroll down and click on the icon (green arrow) „next“ the scroll bar stays at the bottom of the page. What I want to achieve is something like
$(document).ready(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
so the next page will autoscroll to top, but I've tried with no success. Is there any solution?
Thank you!
I'd add the animation to your (I guess) ajax success function.
success:function(e){
// load the new contents
setTimeout(function(){
$('html, body').animate({ scrollTop: 0 }, 'slow');
},50);
}
If it's not ajax you are using, add it to the button click event handler.
Try this code, I tested it on your site it's working there:
$('button[id^="question"]').click(function(){
$('#header-wrapper').animate({ scrollTop: 0 }, 'slow');
});
Scroll bar is on #header-wrapper element and not body. scrolling body wont do anything since it's already at 0 scroll height.

jQuery scroll to element after element animation

I'm having a bit of an animation scrolling issue and have exhausted my debugging efforts. In a nutshell, what I'm trying to do is scroll to an open panel on the users click. User clicks on 1 of a series of panels, that panel opens up (animates), and the freshly opened panel scrolls into view. Simple enough.
The problem I'm having is that if I click on a panel that is below an already open panel the scrolling pulls my new open panel half way off screen. If I click a panel above an already open panel it works fine. Not sure what is going on. I'm animating the panel opening with CSS and using jQuery to animate the scrolling. I'm assuming there is some animation queue timing that is causing the issue but I don't know. I even tried to delay the scroll animation to wait for the panel to finish it's animation but that didn't help either. For example:
$('html, body').delay(1000).animate({scrollTop: $(this).offset().top - 75}, 250);
Instead of
$('html, body').animate({scrollTop: $(this).offset().top - 75}, 250);
Anyway, any help would be appreciated. You can find the code I'm working with here: https://jsfiddle.net/66zzudo4/
UPDATE: You can find the working code here: https://jsfiddle.net/66zzudo4/4/
I believe using a timeout would work:
setTimeout(function() {
$('html, body').animate({scrollTop: $(this).offset().top - 75}, 250);
}, 1000);
Or, jquery animate also takes a callback as an argument when the animation finishes:
$('html, body').animate({scrollTop: $(this).offset().top - 75}, function() {
//Animation complete, do something now like animate other stuff.
}, 250);
Try removing the .top
$('html, body').animate({
scrollTop: $(this).offset() - 75
}, 250);
Check it here. It works. https://jsfiddle.net/66zzudo4/1/

jQuery .offset value to bottom

This is my jQuery code:
$(document).ready(function(){
$("#home-btn").click(function() {
$('html, body').animate({
scrollTop: $("#header").offset().top // Problem
}, 2000);
});
});
Can offset actually accept a value of bottom?? Since this is one of the links at the bottom of my page and I want to scroll from bottom to top. This brings in the top of the page for a second and then scrolls from bottom to top. How to make a smooth scroll effect?
You say it is a "link", perhaps you just need to prevent the default action of the link:
$("#home-btn").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#header").offset().top
}, 2000);
});
Otherwise, it seems to work: jsfiddle

Having some trouble with jQuery scrollTop

ive been researching a ton on this and am coming up at a loss.
Not really sure what is going on, but I can't get this .animate() to animate properly.
I made a JS fiddle outlining the way I have things set up. Basically, its 4 slides, each is 100% height and 100% width, I am getting the slide target dynamically from each link in each slide.
I made a jsFiddle to try and get it to work properly:
http://jsfiddle.net/mikelegacy/WrZev/
Here is the jquery I am using, you'll have to look at the jsFiddle to get the full scope of things, though.
$("a.scrollButton").click(function(e) {
var slideId = $(this).attr("href");
$("html, body").animate({
scrollTop: $(slideId).offset().top
}, 2000);
});
change a.scrollButton to a.slideButton as you have it in your HTML.
$("a.slideButton").click(function(e) {
var slideId = $(this).attr("href");
$("html, body").animate({
scrollTop: $(slideId).offset().top
}, 2000);
return false;
});
http://jsfiddle.net/calder12/WrZev/2/

Categories