[ticket/17459] Add to top button to FAQ

PHPBB-17459
This commit is contained in:
Marc Alexander 2024-11-03 19:51:50 +01:00
parent 2d392791ad
commit 14d889f74f
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
4 changed files with 53 additions and 4 deletions

View file

@ -392,6 +392,28 @@ $('#member_search').click(function () {
return false;
});
/**
* Show to top button if available on page
*/
const $scrollTopButton = $('.to-top-button');
if ($scrollTopButton.length) {
// Show or hide the button based on scroll position
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$scrollTopButton.fadeIn(); // Fade in the button
} else {
$scrollTopButton.fadeOut(); // Fade out the button
}
});
// Scroll smoothly to the top when the button is clicked
$scrollTopButton.click(function (e) {
e.preventDefault(); // Prevent the default anchor link behavior
$('html, body').animate({scrollTop: 0}, 500); // Smooth scroll to top
});
}
/**
* Automatically resize textarea
*/

View file

@ -35,9 +35,6 @@
<dt id="f{faq_block.S_ROW_COUNT}r{faq_block.faq_row.S_ROW_COUNT}"><strong>{faq_block.faq_row.FAQ_QUESTION}</strong></dt>
<dd>{faq_block.faq_row.FAQ_ANSWER}</dd>
</dl>
<a href="#faqlinks" class="top">
{{ Icon('font', 'circle-chevron-up', lang('BACK_TO_TOP'), false) }}
</a>
<!-- IF not faq_block.faq_row.S_LAST_ROW --><hr class="dashed" /><!-- ENDIF -->
<!-- END faq_row -->
</div>
@ -46,5 +43,11 @@
</div>
<!-- END faq_block -->
<div class="to-top-button">
<a href="#faqlinks">
{{ Icon('font', 'chevron-up', '', false) }}
</a>
</div>
<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->

View file

@ -83,6 +83,15 @@ th a:hover {
color: #9e9e9e;
}
.to-top-button {
background-color: #0f4d8a;
opacity: 0.7;
}
.to-top-button a {
color: #e6f7ff;
}
/* arrow links */
.arrow-left:hover,
.arrow-right:hover {

View file

@ -153,7 +153,22 @@ a.lastsubject:hover {
.top {
font-size: 14px;
text-decoration: none;
margin-top: 10px;
margin-top: 12px;
}
.to-top-button {
position: fixed;
right: 24px;
bottom: 24px;
inline-size: 48px;
block-size: 48px;
border-radius: 50%;
display: none;
}
.to-top-button .o-icon {
font-size: 32px;
padding: 8px;
}
/* Back to top of page */