2martens
/
2martens.de
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Improved positioning of back-to-top button 

Signed-off-by: Jim Martens <github@2martens.de>
This commit is contained in:
Jim Martens 2019-06-08 15:40:40 +02:00
parent e0edcffa6d
commit d3f06bc1c5
2 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
_assets/css/critical.scss
View File

@ -9,14 +9,40 @@
border-bottom: 2px solid $light;
}
// back-to-top button
#back-to-top {
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
position: -webkit-sticky;
position: sticky;
bottom: 40px;
display:none;
}
@include media-breakpoint-down(sm) {
#back-to-top {
position: fixed;
right: 20px;
}
}
@include media-breakpoint-only(md) {
#back-to-top {
margin-left: 95%;
}
}
@include media-breakpoint-only(lg) {
#back-to-top {
margin-left: 65%;
}
}
@include media-breakpoint-only(xl) {
#back-to-top {
margin-left: 60%;
}
}
$navbarHeight: 58px;
.large {

10
_layouts/default.html
View File

@ -32,12 +32,12 @@
{% include sidebar.html %}
</div>
</div>
<button id="back-to-top"
class="btn btn-primary btn-lg"
title="Click to return to the start of the page" data-toggle="tooltip" data-placement="left">
<span class="fas fa-chevron-up"></span>
</button>
</div>
<button id="back-to-top"
class="btn btn-primary btn-lg"
title="Click to return to the start of the page" data-toggle="tooltip" data-placement="left">
<span class="fas fa-chevron-up"></span>
</button>
</div>
{% include footer.html %}
</body>