Added a scroll to top function

This commit is contained in:
Robert McGovern 2020-04-18 02:21:16 +01:00
parent ce6ed11461
commit 100f98a7cc
4 changed files with 95 additions and 0 deletions

View File

@ -45,6 +45,7 @@ breadcrumb_separator : ">"
words_per_minute : 200 words_per_minute : 200
head_scripts: head_scripts:
- /assets/js/progress.js - /assets/js/progress.js
- /assets/js/scroll-to-top.js
comments: comments:
provider : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom" provider : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom"
disqus: disqus:

View File

@ -0,0 +1,3 @@
<!-- start custom footer snippets -->
<button id='scroll-to-top'></button>
<!-- end custom footer snippets -->

View File

@ -82,6 +82,47 @@ $base0f: #926e5c;
z-index: 1; z-index: 1;
} }
// Scroll to top
#scroll-to-top {
background: black;
display:block;
position:fixed;
font-size:25px;
bottom:25px;
right:10%;
opacity:0;
z-index:99;
text-align:center;
transform:translateY(30%);
transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
}
@media (max-width: 600px) {
#scroll-to-top {
font-size:20px
}
}
@media (max-width: 600px) {
#scroll-to-top {
right:5%;
bottom:15px
}
}
#scroll-to-top :last-child {
transition:transform 0.7s ease-in-out
}
#scroll-to-top :last-child:active,
#scroll-to-top :last-child:hover {
transform:translateY(-10%)
}
#scroll-to-top span {
cursor:pointer;
color:#1a1d24
}
#scroll-to-top span:hover .up-arrow,
#scroll-to-top span:active .up-arrow {
color:#00adb5
}
//@import "progress.css"; // for progress bar //@import "progress.css"; // for progress bar
@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials @import "minimal-mistakes"; // main partials

View File

@ -0,0 +1,50 @@
function hasScrollBehavior() {
return 'scrollBehavior' in document.documentElement.style;
}
function smoothScroll() {
var currentY = window.scrollY;
var int = setInterval(function () {
window.scrollTo(0, currentY);
if (currentY > 500) {
currentY -= 70;
} else if (currentY > 100) {
currentY -= 50;
} else {
currentY -= 10;
}
if (currentY <= 0) clearInterval(int);
}, 1000 / 60); // 60fps
}
function scrollToTop() {
// document.getElementById('page-title').scrollIntoView({behavior: 'smooth'});
if (hasScrollBehavior()) {
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
smoothScroll();
}
}
function toggleScrollUpButton() {
var y = window.scrollY;
var e = document.getElementById('scroll-to-top');
if (y >= 350) {
e.style.transform = 'translateY(-30%)'
e.style.opacity = 1;
} else {
e.style.opacity = 0;
e.style.transform = 'translateY(30%)'
}
}
document.addEventListener("DOMContentLoaded", function () {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
window.addEventListener("scroll", toggleScrollUpButton);
var e = document.getElementById('scroll-to-top');
e.addEventListener('click', scrollToTop, false);
}, false);