We Keep Coding

How to change this script to autoscroll?

I have a script which has a button to scroll the site but I need it to scroll automatically on page load. I need the script to scroll exactly like shown below, except the button. Could anyone change it for me? I'm new to javascript, thanks..
function scroll(element, speed) {
var distance = element.height();
var duration = distance / speed;
element.animate({scrollTop: distance}, duration, 'linear');
}
$(document).ready(function() {
$("button").click(function() {
scroll($("html, body"), 0.015); // Set as required
});
});

Call the scroll function in on window load, this will scroll the page on load finished.
$(window).on('load', function(){
scroll($("html, body"), 0.015); // Set as required
})

You can try the below JavaScript code
var div = $('.autoscroller');
$('.autoscroller').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
}
if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) {
clearInterval(autoscroller);
}
if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) {
clearInterval(autoscroller);
}
});
var autoscroller = setInterval(function(){
var pos = div.scrollTop();
if ((div.scrollTop() + div.innerHeight()) >= div[0].scrollHeight) {
clearInterval(autoscroller);
}
div.scrollTop(pos + 1);
}, 50);
here on the load of the page. The text are auto-scrolled upto the end of the page.

Why does my if statement keep running?

I'm trying to make a browser scroll to a point on a page if the page is scrolled down. I'm using jQuery .bind() to bind html to mousewheel. Here's my code:
"use strict";
var scrollpoint = 1;
$(document).ready(function(){
console.log(scrollpoint);
$("#divacon").hide();
$("#divbcon").hide();
$('#div-a').waypoint(function() {
$("#divacon").fadeIn();
var scrollpoint = 2;
console.log("waypoint a reached");
},{context:"#container"});
$('#div-b').waypoint(function() {
$("#divbcon").fadeIn();
console.log("waypoint b reached");
},{context:"#container"});
and
$('html').bind('mousewheel', function(e){
var flag = true;
if(flag) {
if(e.originalEvent.wheelDelta < 0) {
if((scrollpoint == 1)) {
var target = $('#div-a');
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
var targetoffset = target.offset().top;
console.log(scrollpoint);
$('#container').animate(
{scrollTop: targetoffset},
400,
function(){
var scrollpoint = 2;
console.log(scrollpoint);
}
);
}
else if((scrollpoint = 2)){
//scroll down
console.log('2');
}
else{
//scroll down
console.log('Down');
}
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
flag = false;
}
});
What's happening is that my if statement is being called after the first time, even when flag = false;. What am I doing wrong? The site can be found live at http://wilsonbiggs.com/sandy

I think it has to be
var flag = true; //put the flag out side mouse wheel bind.
$('html').bind('mousewheel', function(e){
if(flag) {
Otherwise each time your even triggers you set flag to true and the following if condition will be satisfied always.

Javascript Smooth Scrolling - Not working with second click

I use the following script for a smooth scroll effect minus an amount of pixel on one page. The problem is, i click on one anchor link, the scroll effects works as it should but then i scroll back to the top of the page where the links are and click on another page. It doesnt work. I just copied the script from a webpage my javascript is very bad.
Thx for your help.
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top - 70;
$(this).click(function(event) {
if(event != 'undefined') {
event.preventDefault();}
$(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
e.preventDefault();
location.hash = target;
});
});
}
}
});
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
}

There's an error in the code.
Where it says:
$(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
e.preventDefault();
location.hash = target;
});
You are calling preventDefault() on nothing. Leave it as this and it will work:
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});

The error was at the beggining of the code. Instead of using an each loop, you should add a clickevent to the anchor elements. By using the each loop, you only add the click event once, and thus on the second click the event is undefined and the code runs into an error.
Here's your code rewritten as a click event:
$('a[href*=#]').click(function(e){
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top - 70;
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
if( e != 'undefined' ) {
e.preventDefault();
}
location.hash = target;
});
}
}
});
Hope this helps ;-)

How to get a MouseWheel Event to fire only once in jQuery?

So I want to fire a function only once every time a user scrolls up or down via the Mousewheel. See: jsFiddle Demo. The issue is that even though I have the e.preventDefault(), the function still fires multiple times.
The goal is for the function to fire only once whenever a user scrolls up or down. Similar to this site.
Here is the code that I have so far:
var sq = {};
sq = document;
if (sq.addEventListener) {
sq.addEventListener("mousewheel", MouseWheelHandler(), false);
sq.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
sq.attachEvent("onmousewheel", MouseWheelHandler());
}
function MouseWheelHandler() {
return function (e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta < 0) {
/* Scroll Down */
e.preventDefault();
console.log("Down. I want this to happen only once");
} else {
/* Scroll Up */
console.log("up. I want this to happen only once");
e.preventDefault();
}
return false;
}
return false;
}

This has helped me:
var isMoving=false;
$(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) {
event.preventDefault();
if (isMoving) return;
navigateTo();
});
function navigateTo(){
isMoving = true;
setTimeout(function() {
isMoving=false;
},2000);
}
Basically you have a isMoving variable that is set depending on if your animation or whatever you do is in progress. Even though user scrolls multiple times with mousewheel in one "flick", the function fires only once.

​$(document).ready(function(){
var up=false;
var down=false;
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0 && up=false) {
up=true;
down=false;
$(this).text('scrolling up !');
}
elseif(e.originalEvent.wheelDelta /120 > 0 && down=false){
down=true;
up=false;
$(this).text('scrolling down !');
}
});
});
And here is a plug in you can use it

Detect Scroll event while already on top

I have a menu bar on the top of my page which i want to show if i scroll up while already on top. Imagine you scroll up, and while beeing there, you scroll up again, the bar would show.
I have this code using jquery
// listen for the scroll to show the top menu
var was_on_top = false;
$(function () {
$(window).bind("scroll", function (e) {
if ($(window).scrollTop() == 0) {
if ($('.menu').css('display') == "none" && was_on_top) {
$('.menu').slideDown();
} else {
was_on_top = true;
}
} else {
was_on_top = false;
}
});
});
But the scroll event does not fire while already on top. Any ideas?
EDIT: Here goes the working code. Tested on FF, Chrome and IE9
// listen for the scroll to show the top menu
var was_on_top = false;
$(function () {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', onMouseWheelSpin, false); // FireFox
window.addEventListener('mousewheel', onMouseWheelSpin, false); // Chrome
} else {
window.onmousewheel = onMouseWheelSpin;
}
});
function onMouseWheelSpin(event) {
if (!event) // IE sucks
event = window.event;
if ($(window).scrollTop() == 0 &&
(
event.detail < 0 // Firefox
||
(event.wheelDelta && (
(window.opera && event.wheelDelta < 0) // Opera
||
event.wheelDelta > 0 // IE
)
)
)
) {
if ($('.menu').css('display') == "none" && was_on_top) {
$('.menu').slideDown();
} else {
was_on_top = true;
}
} else {
was_on_top = false;
}
}

The scroll event does not fire, because the window is no longer scrolling.
You will likely need to create a custom event for the mouse wheel itself.
This might be helpful: Javascript: Capture mouse wheel event and do not scroll the page?