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.

Sign up for GitHub

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

[WIP]Add scroll-to-top element #62

Closed
wants to merge 4 commits into from
Closed

[WIP]Add scroll-to-top element #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c9deadd
add scrolltotop element and styling
Netacci Oct 2, 2024
30e9413
add js to improve scrolltotop actions
Netacci Oct 2, 2024
7b764e8
add vscode settings to gitignore and delete vscode folder
Netacci Oct 2, 2024
9b7d3f6
update the button color to match style guide and add scroll to top el…
Netacci Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.DS_Store
.DS_Store
.vscode
5 changes: 3 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

</head>
<body>

<span id="the-top"></span>
<header>

<h1>Vocabulary</h1>
Expand Down Expand Up @@ -1019,7 +1019,8 @@ <h1>Name</h1>

</aside> -->


<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../src/js/scroll.js"></script>
<script>
//escapes html within code elements
document.querySelectorAll("code.lang-html").forEach(el => el.innerText = el.innerHTML);
Expand Down
60 changes: 46 additions & 14 deletions docs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,61 @@
/* @import '../src/css/vocabulary.css' layer(vocabulary); */
:root {
scroll-behavior: smooth;
}

body {
width: 65%;
font-size: 1.2em;
width: 65%;
font-size: 1.2em;

padding: 1em;
padding: 1em;
}

pre > code {
display: block;
padding: 2em;
overflow-x: scroll;
display: block;
padding: 2em;
overflow-x: scroll;

/* white-space: pre-wrap; */
background: #ededed;

/* white-space: pre-wrap; */
background: #ededed;
}

span.distinct {
padding: .1em .2em;
padding: 0.1em 0.2em;

background: #ededed;
border-radius: 3px;
background: #ededed;
border-radius: 3px;
}

main ul li {
margin-bottom: .5em;
}
margin-bottom: 0.5em;
}

.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
transition: opacity 0.3s, visibility 0.3s;
z-index: 1000;
}

.scroll-to-top:focus {
outline: 2px solid #05b5da;
}
.show {
opacity: 1;
visibility: visible;
}
.hide {
opacity: 0;
visibility: hidden;
}
@media (max-width: 600px) {
.scroll-to-top {
display: none;
}
}
5 changes: 3 additions & 2 deletions specimen/contexts/archive-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="archive-page">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -293,7 +293,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/blog-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="blog-index">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -578,7 +578,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/blog-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="blog-post">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -334,7 +334,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/default-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body>
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -265,7 +265,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/home-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="home-narrative">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -440,7 +440,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions specimen/contexts/license-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="default-page">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -169,7 +169,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/person-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="person-page">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -263,7 +263,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/program-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="program-index">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -268,7 +268,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/program-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="program-page">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -247,7 +247,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/search-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="search-index">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -286,7 +286,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/team-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="team-index">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -221,7 +221,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
5 changes: 3 additions & 2 deletions specimen/contexts/walkthrough-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body class="walkthrough-page">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<span id="the-top"></span>
<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
Expand Down Expand Up @@ -177,7 +177,8 @@ <h2>Support Our Work</h2>
</div>

</footer>

<a href="#the-top" class="scroll-to-top hide">Back to Top</a>
<script src="../../../src/js/scroll.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
Expand Down
34 changes: 34 additions & 0 deletions specimen/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,36 @@
@import '../src/css/vocabulary.css' layer(vocabulary);
@import '../specimen/tests/grid-test.css' layer(vocabulary);

:root {
scroll-behavior: smooth;
}

.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
transition: opacity 0.3s, visibility 0.3s;
z-index: 1000;
}

.scroll-to-top:focus {
outline: 2px solid #05b5da;
}
.show {
opacity: 1;
visibility: visible;
}
.hide {
opacity: 0;
visibility: hidden;
}
@media (max-width: 600px) {
.scroll-to-top {
display: none;
}
}
16 changes: 16 additions & 0 deletions src/js/scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
document.addEventListener('DOMContentLoaded', function () {
const scrollThreshold = 1000;
const scrollToTopButton = document.querySelector('.scroll-to-top');

const scrollToTop = () => {
if (window.scrollY > scrollThreshold) {
scrollToTopButton.classList.add('show');
scrollToTopButton.classList.remove('hide');
} else {
scrollToTopButton.classList.remove('show');
scrollToTopButton.classList.add('hide');
}
};

window.addEventListener('scroll', scrollToTop);
});