Add go to top button
This commit is contained in:
te2dy
parent
14f5d7b330
commit
fac2e87dc7
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* navigation.js
|
||||
*
|
||||
* Handles dropdown for the primary menu
|
||||
* and toggling it for small screens.
|
||||
* Handles dropdown for the primary menu and toggling it for small screens;
|
||||
* and adds a function to scroll to top of the page on click.
|
||||
*
|
||||
* Based on the work of the WordPress team in the Twenty Twenty-One Theme.
|
||||
*
|
||||
|
|
@ -66,6 +66,12 @@ function marianneAriaExpand( el ) {
|
|||
}
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
// Return to the top of the page on click.
|
||||
$( "#go-to-top" ).click( function () {
|
||||
$( "html, body" ).animate( { scrollTop: 0 }, 200 );
|
||||
} );
|
||||
|
||||
// Adds role and tabindex to menu links.
|
||||
var menu_elements = $( "#menu-primary .menu-item" );
|
||||
|
||||
|
|
@ -77,7 +83,7 @@ function marianneAriaExpand( el ) {
|
|||
$( item )
|
||||
.children( "a" )
|
||||
.attr( "tabindex", "0" );
|
||||
});
|
||||
} );
|
||||
|
||||
/**
|
||||
* Change aria-expanded value on hover and focus.
|
||||
|
|
|
|||
18
footer.php
18
footer.php
|
|
@ -63,6 +63,24 @@
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( false !== marianne_get_theme_mod( 'marianne_footer_go_top' ) ) : ?>
|
||||
<div class="site-footer-block">
|
||||
<?php
|
||||
$marianne_svg_chevron_data = marianne_svg_icons( 'chevron-up' );
|
||||
$marianne_svg_chevron_shapes = $marianne_svg_chevron_data['shapes'];
|
||||
$marianne_svg_chevron_args = array(
|
||||
'aria-label' => __( 'Go to top', 'marianne' ),
|
||||
'class' => 'feather-icons',
|
||||
'size' => array( 12, 12 ),
|
||||
);
|
||||
?>
|
||||
|
||||
<button id="go-to-top">
|
||||
<?php echo marianne_esc_svg( marianne_svg( $marianne_svg_chevron_shapes, $marianne_svg_chevron_args ) . ' ' . esc_html__( 'Go to top', 'marianne' ) ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</footer>
|
||||
</div><!-- #page -->
|
||||
|
|
|
|||
|
|
@ -281,12 +281,17 @@ if ( ! function_exists( 'marianne_svg_icons' ) ) {
|
|||
switch ( $name ) {
|
||||
case '500px':
|
||||
$svg_data['name'] = _x( '500px', 'The name of the photography site.', 'marianne' );
|
||||
$svg_data['shapes'] = '<path d="M7.433 9.01A2.994 2.994 0 0 0 4.443 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343A2.357 2.357 0 0 1 5.079 12a2.357 2.357 0 0 1 2.354-2.353A2.356 2.356 0 0 1 9.786 12a2.356 2.356 0 0 1-2.353 2.353m6.471-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343A2.355 2.355 0 0 1 11.552 12a2.355 2.355 0 0 1 2.352-2.353A2.356 2.356 0 0 1 16.257 12a2.356 2.356 0 0 1-2.353 2.353m-11.61-3.55a2.1 2.1 0 0 0-1.597.423V9.641h2.687c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.39c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.5 1.685c-.636 0-1.19-.408-1.422-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.18-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18M18.938 9.04c-.805.062-1.434.77-1.434 1.61v2.66c0 .155.117.187.293.187s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.73c0 .08-.039.34-.217.58-.135.182-.39.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.56l1.085-1.086c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058L22.46 10.21l-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.09 1.092a.162.162 0 0 0 .115.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.06-.319z"/>';
|
||||
$svg_data['shapes'] = '<path d="M7.433 9.01A2.994 2.994 0 0 0 4.443 12a2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.993 2.993 0 0 0-2.99-2.99m0 5.343A2.357 2.357 0 0 1 5.079 12a2.357 2.357 0 0 1 2.354-2.353A2.356 2.356 0 0 1 9.786 12a2.356 2.356 0 0 1-2.353 2.353m6.471-5.343a2.994 2.994 0 0 0-2.99 2.99 2.993 2.993 0 0 0 2.99 2.99 2.994 2.994 0 0 0 2.99-2.99 2.994 2.994 0 0 0-2.99-2.99m0 5.343A2.355 2.355 0 0 1 11.552 12a2.355 2.355 0 0 1 2.352-2.353A2.356 2.356 0 0 1 16.257 12a2.356 2.356 0 0 1-2.353 2.353m-11.61-3.55a2.1 2.1 0 0 0-1.597.423V9.641h2.687c.093 0 .16-.017.16-.292 0-.269-.108-.28-.18-.28H.39c-.174 0-.265.14-.265.294v2.602c0 .136.087.183.247.214.141.028.223.012.285-.057l.006-.01c.283-.408.9-.804 1.486-.732.699.086 1.262.644 1.34 1.327a1.512 1.512 0 0 1-1.5 1.685c-.636 0-1.19-.408-1.422-1.001-.035-.088-.092-.152-.343-.062-.229.083-.243.18-.212.268a2.11 2.11 0 0 0 1.976 1.386 2.102 2.102 0 0 0 .305-4.18M18.938 9.04c-.805.062-1.434.77-1.434 1.61v2.66c0 .155.117.187.293.187s.293-.031.293-.186v-2.668c0-.524.382-.974.868-1.024a.972.972 0 0 1 .758.247.984.984 0 0 1 .322.73c0 .08-.039.34-.217.58-.135.182-.39.399-.844.399h-.009c-.115 0-.215.005-.234.28-.013.186-.012.269.148.29.286.04.576-.016.865-.166.492-.256.822-.741.861-1.267a1.562 1.562 0 0 0-.452-1.222 1.56 1.56 0 0 0-1.218-.45m3.919 1.56l1.085-1.086c.04-.039.132-.132-.055-.324-.08-.083-.153-.125-.217-.125h-.001a.163.163 0 0 0-.121.058L22.46 10.21l-1.086-1.093c-.088-.088-.19-.067-.322.065-.135.136-.157.24-.069.328l1.086 1.092-1.064 1.064-.007.007c-.026.025-.065.063-.065.125-.001.063.042.139.126.223.07.071.138.107.2.107.069 0 .114-.045.139-.07l1.068-1.067 1.09 1.092a.162.162 0 0 0 .115.045h.002c.069 0 .142-.04.217-.118.122-.129.143-.236.06-.319z" />';
|
||||
break;
|
||||
|
||||
case 'chevron-up':
|
||||
$svg_data['name'] = 'chevron-up';
|
||||
$svg_data['shapes'] = '<polyline points="18 15 12 9 6 15"/>';
|
||||
break;
|
||||
|
||||
case 'chevron-down':
|
||||
$svg_data['name'] = 'chevron-down';
|
||||
$svg_data['shapes'] = '<polyline points="6 9 12 15 18 9"></polyline>';
|
||||
$svg_data['shapes'] = '<polyline points="6 9 12 15 18 9"/>';
|
||||
break;
|
||||
|
||||
case 'diaspora':
|
||||
|
|
|
|||
|
|
@ -575,6 +575,13 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
|
|||
'type' => 'checkbox',
|
||||
);
|
||||
|
||||
$marianne_customizer_options[] = array(
|
||||
'section' => 'marianne_footer',
|
||||
'id' => 'go_top',
|
||||
'title' => __( 'Add a button to go to the top of the page.', 'marianne' ),
|
||||
'type' => 'checkbox',
|
||||
);
|
||||
|
||||
// Social Links.
|
||||
$marianne_customizer_options[] = array(
|
||||
'section' => 'marianne_social',
|
||||
|
|
@ -1052,6 +1059,7 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
|
|||
'marianne_footer_align' => 'left',
|
||||
'marianne_footer_mention' => true,
|
||||
'marianne_footer_text' => '',
|
||||
'marianne_footer_go_top' => false,
|
||||
|
||||
// Social Links.
|
||||
'marianne_social_location' => 'footer',
|
||||
|
|
|
|||
Loading…
Reference in a new issue