Smoothscroll

Smoothscroll with javascript + jquery

Per 16-12-2014. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name Smoothscroll
// @run-at      document-start
// @include      *
// @author       creec
// @description  Smoothscroll with javascript + jquery
// @version 0.0.1.20141216001131
// @namespace https://greasyfork.org/users/3167
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
    document.head.appendChild(script);
  }, false);
  document.head.appendChild(script);
}



// the guts of this userscript
function main() {
  // Note, jQ replaces $ to avoid conflicts.
  //alert("There are " + jQ('a').length + " links on this page.");
	var startposition = false;
	var targetposition = 0;
	var position = 0;
	
	function UpdatePosition()
	{
		jQ('html, body').stop();
		jQ('html, body').animate({
			scrollTop: position
		}, 100,"linear",UpdatePosition)
	}

 function MouseScroll (event) {
	 var rolled = 0;
	 
	 if (!startposition)
		 {
			startposition = jQ(document).scrollTop();
		 }
	 
	 if ('wheelDelta' in event) {
		 rolled = event.wheelDelta;
	 }
	 else {  // Firefox
		 // The measurement units of the detail and wheelDelta properties are different.
		 rolled = -40 * event.detail;
	 }
	 targetposition = targetposition - rolled;
	position = startposition + targetposition - rolled;
	 if (position < 0)
		 {
			 targetposition = -startposition;
		 }
	 if (position > (jQ(document).height()-jQ(window).height()))
		 {
			 targetposition = (jQ(document).height()-jQ(window).height()-startposition);
		 }
	 
	 console.log(position);
	 UpdatePosition();
	 
	 event.preventDefault();
	 return false;
	 
 	}

	var smoothscrollelem = window;
	function Init () {
		// for mouse scrolling in Firefox
		
		
		if (smoothscrollelem.addEventListener) {    // all browsers except IE before version 9
			// Internet Explorer, Opera, Google Chrome and Safari
			smoothscrollelem.addEventListener ("mousewheel", MouseScroll, false);
			// Firefox
			smoothscrollelem.addEventListener ("DOMMouseScroll", MouseScroll, false);
		}
		else {
			if (smoothscrollelem.attachEvent) { // IE before version 9
				smoothscrollelem.attachEvent ("onmousewheel", MouseScroll);
			}
		}
    }

	Init();
	console.log("Smoothscroll loaded!");
}

// load jQuery and execute the main function
addJQuery(main);