Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix smooth scroll code for the website

Browse Source
This commit is contained in:
JC Brand 2017-09-28 21:26:11 +02:00
parent 5ac1e00cdb
commit 79412215b5
1 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/website.js
View File

@ -1,37 +1,54 @@
(function () {
document.addEventListener("DOMContentLoaded", function(event) {
function scrollTo(element, to, duration, hash) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {
window.location.hash = hash;
return;
}
scrollTo(element, to, duration - 10, hash);
}, 10);
}
window.addEventListener('scroll', function (ev) {
var navbar = document.querySelector(".navbar");
var fixed_top = document.querySelector(".navbar-fixed-top");
var rect = navbar.getBoundingClientRect();
if (rect.top + document.body.scrollTop > 50) {
if (rect.top + window.scrollY > 50) {
fixed_top.classList.add("top-nav-collapse");
} else {
fixed_top.classList.remove("top-nav-collapse");
}
});
var getDocumentHeight = function () {
return Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
};
Array.prototype.forEach.call(document.querySelectorAll('.page-scroll a'), function (el) {
el.addEventListener('click', function (ev) {
ev.preventDefault();
var hash = this.getAttribute("href")
var goal = document.querySelector(hash);
scrollTo(document.body, goal.offsetTop, 600, hash);
var endLocation = document.querySelector(hash).offsetTop;
var startLocation = window.pageYOffset;
var distance = endLocation - startLocation;
var start, percentage, position;
var timeLapsed = 0;
function scrollAnimation(timestamp) {
if (!start) { start = timestamp; }
timeLapsed += timestamp - start;
percentage = (timeLapsed / parseInt(500, 10));
percentage = (percentage > 1) ? 1 : percentage;
position = startLocation + (distance * percentage * percentage);
window.scrollTo(0, Math.floor(position));
var currentLocation = window.pageYOffset;
if (position == endLocation ||
currentLocation == endLocation ||
((startLocation < endLocation && window.innerHeight + currentLocation) >= getDocumentHeight())) {
window.location.hash = hash;
return;
}
window.requestAnimationFrame(scrollAnimation);
start = timestamp;
}
window.requestAnimationFrame(scrollAnimation);
});
});
});