malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add smooth anchor scrolling to chapters

Browse Source
This commit is contained in:
Tetrakern 2023-03-09 12:32:32 +01:00
parent ce76d2e1f4
commit ea960d3eff
4 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/functions/_content_helpers.php
View File

@ -821,7 +821,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// Start HTML ---> ?>
<a href="#top" class="micro-menu__up up" tabindex="-1"><i class="fa-solid fa-caret-up"></i></a>
<a href="#top" onclick="return fcn_scrollToAnchor(this)" class="micro-menu__up up" tabindex="-1"><i class="fa-solid fa-caret-up"></i></a>
<?php // <--- End HTML
$micro_menu['top'] = ob_get_clean();

4
includes/functions/hooks/_chapter_hooks.php
View File

@ -199,11 +199,11 @@ if ( ! function_exists( 'fictioneer_chapter_nav_buttons' ) ) {
<?php endif; ?>
<?php if ( $location === 'top' ) : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Jump to bottom', 'fictioneer' ); ?>">
<a href="#bottom" name="top" class="anchor button _secondary"><i class="fa-solid fa-caret-down"></i></a>
<a href="#bottom" onclick="return fcn_scrollToAnchor(this)" name="top" class="anchor button _secondary"><i class="fa-solid fa-caret-down"></i></a>
</div>
<?php else : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Jump to top', 'fictioneer' ); ?>">
<a href="#top" name="bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-up"></i></a>
<a href="#top" onclick="return fcn_scrollToAnchor(this)" name="bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-up"></i></a>
</div>
<?php endif; ?>
<?php if ( $args['next_index'] ) : ?>

2
js/utility.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
src/js/utility.js
View File

@ -731,3 +731,21 @@ function fcn_ariaCheckedUpdate(source) {
target.ariaChecked = checked;
}
}
// =============================================================================
// SCROLL ANCHOR INTO VIEW
// =============================================================================
/*
* Scroll smoothly to anchor.
*
* @since 5.2.0
* @param {HTMLElement} source - Clicked element.
*
* @return false
*/
function fcn_scrollToAnchor(source) {
_$(`[name="${source.getAttribute('href').replace('#', '')}"]`).scrollIntoView({ behavior: 'smooth', block: 'center' });
return false; // Prevent default link behavior
}