We Keep Coding

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.

Responsive sliding on click

You guys already helped me out a lot, I hope you can help me with this question to.
This is my website so far: http://stilld.nl/test/
Everything is working pretty good (need to do a lot of tidying up in my code though).
Please scroll down to the portfolio part. Click an item and the details appear beneath the portfolio. PERFECT!
PROBLEM: size you browser down to mobile format. Click a portfolio item. it doesn't scroll down far enough, because my portfolio items are now displayed beneath each other. They take up much more vertical space now!
WHAT I WANT: Is there a way to make code responsive? So something like: if screen size is smaller then 600 px THEN slide down 500px on click.
This is the code I'm using right now:
$(document).ready(function(){
$(".portfolio").click(function () {
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});
});

You should calculate the offset with either jQuery's .offset() or jQuery's .position().
What you could do for example is:
$(".portfolio").click(function () {
var offSetTarget = $('.description').position().top;
var scrollExtra = 0;
$('body').animate({
scrollTop: offSetTarget + scrollExtra
}, 600);
});
Where you can determine how much extra you want to scroll.
For example if you want to scroll just above the .portfolio, you can add: scrollExtra = -10; . Or if you want to scroll halfway, you could do: scrollExtra = $('.portfolio').height()/2;
I prepared a working example for you HERE.
To prove that it actually works, you can play with the window size here.
I hope that answers your question. Good luck!
Update
To implement it into your example, we would have to determine where to scroll to.
For illustrational purposes, I have chosen to do this with the divs #alldescriptions and #port_img1 in this example.
The jQuery for your website would then be:
$(document).ready(function() {
$(".portfolio").click(function () {
var offSetTarget = $('#alldescriptions').position().top;
var scrollExtra = 0;
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('body').animate({scrollTop: $('#port_img1').position().top }, 600);
});
});
Again, mind you that you can alter the exact scrolling location by giving var scrollExtra a different value.
You can find an implementation of this code here and a live fullscreen example here.
Please play around with the window size again so you can see it actually works with every screensize. Good luck!

You could detect the inner width of the screen and then set variables for the offset.
if(window.innerWidth <= 600) {
var offSet = 500;}
else{
var offSet = 600;}
Then replace this in your code:
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, offSet);
BUT.... if you want to simplify your code, you could use CSS Transitions. Then just use jQuery to add and remove a class that triggers the Transition, using media querys to change the offset. It would also have less overhead.

JQuery ScrollTop glitches with fadeIn and fadeOut

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

jQuery offset fixed header using scrollTop

I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?

I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.

Simple horizontal scrolling

Is it possible to keep a simple function like this here:
$.fx.speeds.xslow = 1500;
function goToByScroll(id){
$('html,body').animate({
scrollTop: $("#"+id).offset().top
},'slow');
}
and make it for horizontal scrolling?
I want to keep things simple like this without using a big horizontal plugin. I was thinking scrollLeft, but could not get this to work with the offset... Any ideas would be great! Thanks in advance

Like you said, you can do this using scrollLeft:
function goToByScrollHoriz(id){
$('html,body').animate({
scrollLeft: $("#"+id).offset().left
},'slow');
}
See this fiddle for a working example (make sure Div #3 isn't visible on the page when you run it).