Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Place a scrollable button to the top of the page #2243

Merged
merged 13 commits into from
Feb 23, 2021
Merged
3 changes: 3 additions & 0 deletions includes/scroll-button.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<button class="arrow-for-scrolling-top" id="js-scroll-top">
{% octicon "chevron-up" %}
</button>
2 changes: 2 additions & 0 deletions javascripts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import '../stylesheets/index.scss'
import displayPlatformSpecificContent from './display-platform-specific-content'
import explorer from './explorer'
import scrollUp from './scroll-up'
import search from './search'
import nav from './nav'
import browserDateFormatter from 'browser-date-formatter'
Expand All @@ -23,6 +24,7 @@ import airgapLinks from './airgap-links'
document.addEventListener('DOMContentLoaded', async () => {
displayPlatformSpecificContent()
explorer()
scrollUp()
search()
nav()
browserDateFormatter()
Expand Down
22 changes: 22 additions & 0 deletions javascripts/scroll-up.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export default function () {
// function to scroll up to page top
const PageTopBtn = document.getElementById('js-scroll-top')
if (!PageTopBtn) return

PageTopBtn.addEventListener('click', (e) => {
heiskr marked this conversation as resolved.
Show resolved Hide resolved
window.scrollTo({
top: 0,
behavior: 'smooth'
})
})

// show scroll button only when display is scroll down
window.addEventListener('scroll', function () {
const y = document.documentElement.scrollTop // get the height from page top
if (y < 100) {
PageTopBtn.classList.remove('show')
} else if (y >= 100) {
PageTopBtn.classList.add('show')
}
})
Comment on lines +14 to +21
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this! Great addition 👏

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JasonEtco I'm really glad to hear that✨

}
1 change: 1 addition & 0 deletions layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
{% endif %}
{% include support-section %}
{% include small-footer %}
{% include scroll-button %}
</main>
</body>
</html>
1 change: 1 addition & 0 deletions stylesheets/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ $marketing-font-path: "/dist/fonts/";
@import "search.scss";
@import "overrides.scss";
@import "sidebar.scss";
@import "scroll-button.scss";
@import "explorer.scss";
// from https://unpkg.com/[email protected]/styles/github.css
@import "syntax-highlighting.scss";
Expand Down
18 changes: 18 additions & 0 deletions stylesheets/scroll-button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
button.arrow-for-scrolling-top {
opacity: 0;
transition: 1s;
background-color: #0367d6;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to use a primer variable

color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
&.show {
opacity: 1;
border: none;
transition: 1s;
}
}