Skip to content

Instantly share code, notes, and snippets.

@arielsalminen
Created June 8, 2012 12:07
Show Gist options
  • Save arielsalminen/2895296 to your computer and use it in GitHub Desktop.
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.
/*!
* 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;
};
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);
});
});
@arielsalminen
Copy link
Author

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment