Created
June 8, 2012 12:07
-
-
Save arielsalminen/2895296 to your computer and use it in GitHub Desktop.
Got rid of the jQuery library on http://viljamis.com and this is a short comparison between the old and new.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* viljamis.com/projects/ v1.6 | |
* http://viljamis.com | |
* Copyright (c) 2011-2012 @viljamis | |
*/ | |
// Get current position | |
function currentYPosition() { | |
// Firefox, Chrome, Opera, Safari | |
if (self.pageYOffset) { | |
return self.pageYOffset; | |
} | |
// Internet Explorer 6 - standards mode | |
if (document.documentElement && document.documentElement.scrollTop) { | |
return document.documentElement.scrollTop; | |
} | |
// Internet Explorer 6, 7 and 8 | |
if (document.body.scrollTop) { | |
return document.body.scrollTop; | |
} | |
return 0; | |
} | |
// Get current element position | |
function elmYPosition(eID) { | |
var elm = document.getElementById(eID), | |
y = elm.offsetTop, | |
node = elm; | |
while (node.offsetParent && node.offsetParent !== document.body) { | |
node = node.offsetParent; | |
y += node.offsetTop; | |
} | |
return y; | |
} | |
// Scrolling | |
// http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript | |
function smoothScroll(eID) { | |
var startY = currentYPosition(), | |
stopY = elmYPosition(eID), | |
distance = stopY > startY ? stopY - startY : startY - stopY, | |
speed = Math.round(distance / 100), | |
step = Math.round(distance / 25), | |
leapY = stopY > startY ? startY + step : startY - step, | |
timer = 0, | |
i; | |
if (distance < 100) { | |
scrollTo(0, stopY); | |
return; | |
} | |
if (speed >= 20) { | |
speed = 20; | |
} | |
if (stopY > startY) { | |
for (i = startY; i < stopY; i += step) { | |
setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed); | |
leapY += step; | |
if (leapY > stopY) { | |
leapY = stopY; | |
} | |
timer++; | |
} | |
return; | |
} | |
for (i = startY; i > stopY; i -= step) { | |
setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed); | |
leapY -= step; | |
if (leapY < stopY) { | |
leapY = stopY; | |
} | |
timer++; | |
} | |
} | |
// Variables | |
var didSetOpacity = false, | |
didInitEventListeners = false, | |
scrollTimer = null, | |
resizeTimer = null, | |
showAfterPosition = 1400, | |
linkEl = document.getElementById('back_top'); | |
// console.log("Switch triggers after user scrolls below " + showAfterPosition + "px"); | |
// Set opacity | |
// http://www.quirksmode.org/js/opacity.html | |
function setOpacity(value) { | |
linkEl.style.opacity = value / 10; | |
linkEl.style.filter = 'alpha(opacity=' + value * 10 + ')'; | |
didSetOpacity = true; | |
} | |
// Fadein & hide back to top button | |
function toggleSwitch() { | |
// console.log("Checked user's current position, it's " + currentYPosition() + "px"); | |
if (currentYPosition() > showAfterPosition) { | |
if (!didSetOpacity) { | |
// console.log("Scrolled below " + showAfterPosition + "px, showing the switch"); | |
var i; | |
for (i = 0; i < 11; i++) { | |
setTimeout('setOpacity(' + i + ')', 50 * i); | |
} | |
} | |
} else { | |
if (didSetOpacity) { | |
// console.log("Scrolled above " + showAfterPosition + "px, hiding the switch"); | |
setOpacity(0); | |
didSetOpacity = false; | |
} | |
} | |
} | |
// Fire the callback only when needed | |
var triggerToggle = function () { | |
if (scrollTimer) { | |
clearTimeout(scrollTimer); | |
} | |
scrollTimer = setTimeout(function () { | |
scrollTimer = null; | |
toggleSwitch(); | |
}, 200); | |
}; | |
// Init function | |
function initEventListeners() { | |
// Don't run on small screen | |
if (window.innerWidth > 900) { | |
if (!didInitEventListeners) { | |
// Add event listeners, W3C event model | |
if (document.addEventListener) { | |
window.addEventListener('scroll', triggerToggle, false); | |
// If IE event model is used | |
} else if (document.attachEvent) { | |
window.attachEvent('onscroll', triggerToggle); | |
} | |
// console.log("Added event listeners"); | |
didInitEventListeners = true; | |
} | |
} else { | |
if (didInitEventListeners) { | |
// Remove event listeners, W3C event model | |
if (document.addEventListener) { | |
window.removeEventListener('scroll', triggerToggle, false); | |
// If IE event model is used | |
} else if (document.attachEvent) { | |
window.detachEvent('onscroll', triggerToggle); | |
} | |
// console.log("Removed event listeners"); | |
didInitEventListeners = false; | |
} | |
} | |
} | |
// Initialize event listeners | |
initEventListeners(); | |
// Check for resize and init again when needed | |
window.onresize = function () { | |
if (resizeTimer) { | |
clearTimeout(resizeTimer); | |
} | |
resizeTimer = setTimeout(function () { | |
// console.log("Window was resized"); | |
resizeTimer = null; | |
initEventListeners(); | |
}, 200); | |
}; | |
// Handle the click event | |
linkEl.onclick = function () { | |
smoothScroll('top'); | |
return false; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function () { | |
// Variables | |
var $scrollEl = $('body,html'), | |
$backtoTop = $('.back_top'); | |
// Show or hide switch | |
$(window).scroll(function () { | |
if ($(this).scrollTop() > 1500) { | |
$backtoTop.fadeIn(); | |
} else { | |
$backtoTop.fadeOut(); | |
} | |
}); | |
// Handle the click event | |
$backtoTop.click(function (e) { | |
e.preventDefault(); | |
$scrollEl.animate({ | |
scrollTop: 0 | |
}, 800); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Got rid of the jQuery library on http://viljamis.com and wanted to do a short comparison between the old and new.
This script is used for a fairly simple "scroll to top" button on desktop layout which fades in when you scroll below a certain point and fades out when you scroll back to top. There's no easing on the plain JS version at the moment.
Please also note that the new code has much more logic behind and it’s only executed once the viewport is large enough (so it can’t be compared directly).