Add scroll-to-top button for mobile advanced atlas
This commit is contained in:
parent
1a31be229d
commit
d839503c1e
3 changed files with 28 additions and 0 deletions
23
items_2.css
23
items_2.css
|
@ -114,3 +114,26 @@
|
|||
margin: 0 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
#scroll-up {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
bottom: 4vw;
|
||||
right: 4vw;
|
||||
position: fixed;
|
||||
display: none;
|
||||
background-color: #212121;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 10vw;
|
||||
border: 1px solid #666;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media(max-width: 1099px) {
|
||||
#scroll-up {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,6 +58,7 @@
|
|||
<div class="center" id="item-list-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scroll-up">↑</div>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript" src="build_utils.js"></script>
|
||||
<script type="text/javascript" src="loadheader.js"></script>
|
||||
|
|
|
@ -404,6 +404,10 @@ function init_items2() {
|
|||
// focus the query filter text box
|
||||
searchFilterField.field.focus();
|
||||
searchFilterField.field.select();
|
||||
|
||||
// scroll-to-top button
|
||||
document.getElementById('scroll-up')
|
||||
.addEventListener('mousedown', e => scrollTo({ top: 0, behavior: 'smooth' }));
|
||||
}
|
||||
|
||||
load_init(init_items2);
|
||||
|
|
Loading…
Reference in a new issue