We Keep Coding

When I hide a div it pushes the div below it up

I am trying to make a scroll down animation where the user clicks a button is scrolls down to a div and deletes the two divs above it. However, my problem is that the animation works fine on chrome but on firefox and safari the button actually make you scroll past the beginning of the div.
My desired output is https://wearebarbarian.com/
My JS:
$(document).on('click', 'a[href^="#index"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - 100
}, 1200);
$('.introsection').delay(1300).hide(0);
$('#swipe-down').delay(1300).hide(0);
$('body').css('overflowY', 'scroll');
$('#home-mobile-nav').css('position', 'fixed');
$('#home').css('margin-top', '0');
});
I think the problem is:
$('.introsection').delay(1300).hide(0);
$('#swipe-down').delay(1300).hide(0);
is there a better way to hide the divs.
the codepen to my problem is https://codepen.io/mrsalami/pen/GBRmgx

Use -webkit-, -moz- to the CSS to make the CSS specific for browser.
-webkit- is for Chrome and Safari and -moz- is for Firefox.
Only by defining specific CSS related to margin and padding, the design of the content can be maintain same through out the browser.

Page Scrolling left to right

i want to create a webpage like http://seller.flipkart.com . I want to scroll my page first from up to down and then left to right using scrolling button only and background drawing. Can you tell me how can i do this and which languages should i learn?
$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");

The effect you are talking about is known as parallax effect.
Use this skollr plug-in (demo link : http://prinzhorn.github.io/skrollr/)

SmoothScroll scrolls too far

im working on my new portfolio and im having a problem that i cant fix without help.
Here you have a link of my website so far: www.jsfiddle.net/Cessum/pmaefrjo/
What i want is that when you click on creaties the website scrolls too far. To explain it better you have to click on creaties and then remove the white menu bar with inspect element.
After you have done that you can see that there is red color under (behind) the menu bar. That is the problem i want to fix. It should stop scrolling before the red gets behind the white menu bar.
Can you help me fix this? Thanks!

To remove the height you can do this http://jsfiddle.net/pmaefrjo/1/
$('html,body').animate({
scrollTop: target.offset().top - 50 // the height of #MenuBar
}, 1000);
OR
$('html,body').animate({
scrollTop: target.offset().top - $('#MenuBar').height()
}, 1000);

Full Page Smooth Scrolling

I'm using this code to use smooth scrolling in my website (demo):
$("#click-me").click(function(){
$('html,body').animate({
scrollTop: window.screen.availHeight
}, 200);
});
I'm trying to scroll so exactly the height of the page. However, it seems to scroll past this point. I've tried putting in "100%" as a value, but it didn't work.
What is causing this problem, and what should I do to fix it?
Thanks!

It's working correctly but unless you add this (or account for padding and margin on body), the result is slightly off.
body{
padding:0;
margin:0;
}
http://jsfiddle.net/bb9ux/2/ (non-working version: http://jsfiddle.net/bb9ux/3/ )

Scroll to particular div:
$("#click-me").click(function(){
$('html, body').animate({
scrollTop: $('#scroll-here').offset().top
}, 2000);
});
FIDDLE

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.