mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-07 20:08:53 +00:00
[ticket/17459] Add to top button to FAQ
PHPBB-17459
This commit is contained in:
parent
2d392791ad
commit
14d889f74f
4 changed files with 53 additions and 4 deletions
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Add table
Reference in a new issue