Develop Reference

How to hide a div while keeping the other divs below the same position

I have a smooth scroll down animation like this. Here is my animation.
My problem is that the animation works fine on Chrome, but on Safari and Firefox, the animation makes the user scroll to the bottom of the page not the begin of it.
My code for creating the animation:
$(document).on('click', 'a[href^="#index"]', function (event) {
event.preventDefault();
// This function makes the scroll animation to the div with the id="index"
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - 100
}, 1200);
//Once the user clicks on the button and scrolls to the div. The two divs above the index div are hidden after 1300 millsecs.
$('.introsection').delay(1300).hide(0);
$('#swipe-down').delay(1300).hide(0);
$('#home').css('margin-top', '0');
});
Why does code below works fine on Chrome, but on Firefox/Safari doesn't work as similar as Chrome?
$('.introsection').delay(1300).hide(0);$('#swipe-down').delay(1300).hide(0);

How can I stop $(window).scroll event with jquery?

I'm trying to freeze scroll at a div position till user click, hover another div. After user action, scroll should be released and work normally! But it doesn't work! How can I make scroll work normally after user hover, click on this div? Here is the full code for reference: https://jsfiddle.net/tqwr3hrp/ (tested on chrome)!
<div class="stopscroll">click/mouseover here to stop</div>
<div class="likebox"></div>
$(window).scroll(function(e) {
$('html, body').animate({ scrollTop: $('.likebox').offset().top - 100 }, 1000);
});
$('.stopscroll').on('tap click mouseover', function(e) {
$(window).off('scroll');
//another attempt
$('html, body').off('scroll');
//and another attempt
$('html, body').stop().animate();
});

This code makes that your page actually scrolls automatically:
function start_scrolling() {
$('body').animate({
scrollTop: $('body').height() - $(window).height()
}, 10000, 'linear');
}
start_scrolling();
This code lets the scrolling stop if you hover your div and lets it start again if you unhover it. Instead of doing the same with click I recommend adding a checkbox, which I did in this example. If the checkbox is checked, scroll as usual, if not, let the user scroll himself.
$('.stopscroll').mouseover(function() {
$('body').stop();
}).mouseout(function() {
if($('#autoscroll').is(':checked')) {
start_scrolling();
}
});
This last code is a bonus and lets the user take control immediatedly: If the user scrolls, the autoscroll is deactivated. If he wishes to enable the autoscroll again, he can use the checkbox.
$('body').on('scroll wheel DOMMouseScroll touchmove', function() {
$('body').stop();
$('#autoscroll').prop('checked', false);
});
JSFiddle

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/

popstate event doesn't animate the scroll

The website I am building has a very weird behavior. I want to be able to scroll animate to the previous section when user clicks back/forward button. Here is my code:
var scrollToSection = function($section) {
$('body, html').animate({
scrollTop: $section.offset().top
}, 700, 'easeInOutExpo');
}
$(window).on('popstate', function(e) {
e.preventDefault();
scrollToSection($(location.hash));
});
This just straight up jumps to the section without animating the scroll. What am I doing wrong?
Full Code: http://codepen.io/Gasimzada/pen/FHzsG. If you open the output frame in a new tab you can see the weird behavior by clicking the back button after scrolling to the bottom or some other place.

.js Scroll left and right of page

I have the following script and page layout - http://jsfiddle.net/wLkYg/ that allows the user to scroll up and down on my website, with a neat little javaScript swing effect.
However, as I would like to now arrange the content (colored #div boxes from the jsfiddle example above) to be next to each other/side to side, it loses the scrolling effect - http://jsfiddle.net/UjeZH/.
How would I be able to achieve the same transitions in second example, as it is in the first?

I have two versions of what you need already made up for you.
Version 1: Divs on top of each other
Version 2: Divs on top and next to each other
Check them out and tell me if they suit your need.
Both versions are designed in a way so each div will have your page's height and width.
The first version doesn't have the swing effect but you can add it by:
Including jQuery
Adding the following JS ( the same as the second version )
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Also if you use the above code, it will fix your problem, as it allows you to scroll vertically and horizontally. The code that you have allows you to scroll only vertically that's why it is not working when you align your divs horizontally.

document.body.addEventListener('wheel', function (e) {
console.log(this.scrollLeft)
e.preventDefault()
if (e.deltaY > 0) {
this.scrollLeft += 10
} else {
this.scrollLeft -= 10
}
})
set css and test it
html,body {width: 2000px; height: 200px; background: orange}
same as it,you can get event by another element.