We Keep Coding

Scroll to bottom of page when scroll down and to top when scroll up smoothly

I have a webpage with 2 stacked divs with 100vh height each. I have 2 objectives:
The browser has to scroll all the way down to the bottom of the second div when the user scrolls down. Conversely scroll up to the top of the first div when the user scrolls up. Essentially, I want to allow only for two scroll positions (top and bottom of the document).
I want the scrolling to be animated so it feels smooth when moving up/down.
Markup here
<div class='jumbotron' style='height:100vh;'></div>
<div class='content' style='height:100vh;'></div>
My first attempt achieves the first objective but not the second with the following code.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(window).scrollTop(1000);
}
else {
$(window).scrollTop(0);
}
lastScrollTop = st;
});
I've tried the following code but it has 2 problems. Firstly, the scroll down animation kicks in very slowly so it gets confusing for the user. Secondly, for some reason once the browser scrolls to the bottom of the page it gets stuck there and never goes back up.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('html, body').animate({
scrollTop: $("#displayed-text").offset().top
}, 2000);
}
else {
$('html, body').animate({
scrollTop: $(".jumbotron").offset().top
}, 2000);
}
lastScrollTop = st;
});
Can you guide me to find a better way to achieve these 2 objectives successfully?

scrollTop gets a number and scroll to that number on the page, in the second animation you give the scroolTop a jquery object = $(".jumbotron"), you should do the same as you did above with offset().top which return a number, the position of the top of the given div.
so $(".jumbotron").offset().top.
Also you set the animation to 2 seconds, meaning that the animation you want (to move from top to bottom and bottom to top) will take 2 seconds to finish, if you want it to be faster you need to play with the second argument you pass to .animate(), in milliseconds, 1000 = 1 second.
Updated code:
var lastScrollTop = 0;
var animationTime = 2000; //play with that number to get the right speed you want
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('html, body').animate({
scrollTop: $("#displayed-text").offset().top
}, animationTime);
}
else {
$('html, body').animate({
scrollTop: $(".jumbotron").offset().top
}, animationTime);
}
lastScrollTop = st;
});

slideToggle is animating the div up and down continuously

I am using slideToggle to make my header move with the page once scrollTop hit the 100. But once the scrollbar reaches to 100 and more, it keeps animating up and down for few moment.
Here is my code:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100){
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').slideToggle("slow");
}else if(ScrollTop<=99){
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});
please let me know what's wrong?

You are saying to the browser, whenever the user scrolls down the page, see how far they have travelled. If they have travelled more than 99, then slide that header, otherwise do some other class toggling.
So let's say they scroll to 120, it will slide. Then they scroll down more to 140, it will slide. You have no check in place on whether it has already slid down, thus it will keep doing it. A simple approach would be to just add a boolean: -
var toggled = false;
$(window).scroll(function () {
var ScrollTop = $(window).scrollTop();
if (ScrollTop >= 100 && !toggled) {
$('#main_header')
.removeClass("relative")
.addClass("fixed")
.stop() // stop any prev animation
.css('display', 'none') // force hide so it slides
.slideToggle("slow");
toggled = true; // won't enter again until set to false
} else if (ScrollTop <= 99 && toggled) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
toggled = false; // scrolled back up, can now slideToggle again!
}
});

Use jQuery .stop() method:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100) {
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').stop(true).slideToggle("slow");
} else if(ScrollTop<=99) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});

Scroll On Mouse Hover

I'm an interface designer new to development, and I've run into a snag with a side project I'm working on. I'd like to create a long, horizontally-scolling parallax scene. Users can use their mousewheel to scroll the view horizontally. (I'm currently using this JQuery plugin to help me accomplish this: http://www.pixxelfactory.net/jInvertScroll/)
Additionally, I'd like to ability for users to hover over a 20px gap on the left or right edge of their browser window to scroll the view in that direction for as long as they hover there. (As a reference, this interaction is based on a lot of MOBA games like LoL, Dota 2, or HOTS, where users can hold their cursors over an edge of the screen to pan around the map.)
I've found a sample script (shown below), but it doesn't accomplish exactly what I'm trying to do. In this example, the screen is divided in half vertically, and hovering in the top or bottom section scrolls the view up or down. As I mentioned above, I only want a 20px wide by 100% height of the screen area which a user can hover to scroll their view.
My current source:
$(document).mousemove(function(e) {
$("html, body").scrollTop(function(i, v) {
var h = $(window).height();
var y = e.clientY - h / 2;
return v + y * 0.1;
});
});
Any suggestions would be amazing!

First make 2 divs, one for the left and one for the right. Set their position to fixed in CSS and make them scroll the page while hovering over them.
This is what my JS test code looks like:
var offset = 0;
$(document).ready(function(){
$('.left').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
offset += 300;
$('html, body').animate({
scrollTop: offset
}, 1);
}, 10);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
$('.right').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
offset -= 300;
$('html, body').animate({
scrollTop: offset
}, 1);
}, 10);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
});
Here is the full example:
https://jsfiddle.net/h596y5rs/1/

Javascript DIV Movement on scroll

NIm creating an animation that moves a div incrementally on scroll. I'm close but I don't think my code is the most efficient and I don't know how to adapt it to add more arguments. So for instance, hitting a certain height on the page will then move the object right and stop moving it down. Below is my JS and the codepen can be found at;
http://codepen.io/anon/pen/KxHwu - Original
http://codepen.io/anon/pen/DLxqg - Messing about with moving right
var lastScrollTop = 0;
var boxPosition = $('#box').position();
var row2Position = $('#row2').position();
var distance = $('#row2').offset().top,
$window = $(window);
console.log(distance);
$window.scroll(function() {
if ( $window.scrollTop() >= distance - 400 ) {
var st = $(window).scrollTop();
console.log(st);
$('#box').css({top: 0 + st});
//CODE NOT WORKING
if(st >= 270) {
var boxPos = $('#box').position();
console.log(boxPos.left);
$('#box').css({left: boxPos.left + st});
}
//
lastScrollTop = st;
}
});
I'm looking for the box to start scrolling like it does, then when it hits half of row 2 scroll right.
I hope I have explained this in an easy way!
Thanks

http://codepen.io/anon/pen/tHwlq
Here is an example of how to do it; you'll need to tweak the numbers to make it work as you plan.
var $window = $(window);
var $box = $("#box");
$window.scroll(function() {
var scrollTop = $window.scrollTop();
if (scrollTop >= 250 && scrollTop < 400) {
$box.css({top: -250 + scrollTop});
} else if(scrollTop >= 400 && scrollTop < 600) {
$box.css({left: (50+(scrollTop-400)/2)+"%"})
}
});
If your project has numerous elements like this, I'd recommend the ScrollMagic (http://janpaepke.github.io/ScrollMagic/) library.
As far as efficiency is concerned I'd recommend the following:
1) Cache the jQuery selectors (note $box variable). Otherwise, jQuery will have to query the DOM on every scroll event.
2) Cache scrollTop rather then querying it multiple times within the event callback.
3) Although left and top work, using the transform: translate() property is more efficient, especially on mobile devices. (https://developer.mozilla.org/en-US/docs/Web/CSS/transform). However, on most mobile devices, scroll events only fire at the completion of a scroll, not while a page is scrolling.

Apple timeline style scrolling on mouseover

I would like to build a slider like Apple did: http://www.apple.com/30-years/
I have no idea how to scroll on mouseover like on the link above. I know I have to decrease the translateX value by X, but what is X? :)
// scroll animation
function scrollAnimation(){
$('ul').css({
'transform' : 'translateX(-' +mouseX+ 'px)'
});
scrollAnimation();
}
I would like to scroll the images continuosly, with a speed what depends from the mouse's position.
Here is my full code: http://jsfiddle.net/M8cnV/light/
I'm new here, so I appreciate any comments about my code.

Here's what I came up with:
http://jsfiddle.net/5nTpS/
I added some new variables to keep track of how far from the left or right edge the cursor is, which direction to scroll and how fast to scroll:
var scrollSpeed = 0;
var hotEdgeWidth = 200;
var animationSign = "-";
And modified your mousemove function so that it works out if the cursor is close enough to the left or right of the container that you want the images to scroll, which direction you want them to scroll in, and how fast you want them to scroll:
$(container).mousemove(function(e) {
if(e.pageX > $(this).width() - hotEdgeWidth){
scrollSpeed = hotEdgeWidth - ($(this).width() - e.pageX);
animationSign = "-";
}
else if(e.pageX < hotEdgeWidth){
scrollSpeed = hotEdgeWidth - e.pageX;
animationSign = "+";
}
else{
scrollSpeed = 0;
}
scrollAnimation();
}).mouseout(function(e){
scrollSpeed = 0;
});
Then, change scrollAnimation to use the .animate function, and add a complete function to call the scrollAnimation function again once the animation has finished. It only animates if no animation is already happening to prevent a feedback loop happening:
function scrollAnimation(){
if (!$('li').is(':animated')){
$( "li" ).animate({
"left": animationSign + "="+scrollSpeed+"px"
},
500,
function(){
scrollAnimation();
});
}
}