Animate "Back to top"

Hi there,

One of the methods here should do: https://docs.generatepress.com/article/adding-php/

Code Snippets is the easiest if you aren't using a child theme.

Hi leo!

I think he expresses me wrong, sorry for my English.

What I want is to include this code: .animate ({scrollTop: "20"}, 1000, 'swing'); with which I show here below:

add_filter ('generate_back_to_top_scroll_speed', 'tu_back_to_top_scroll_speed');
function tu_back_to_top_scroll_speed () {
return 700;
}

This does not work for me:

add_filter ('generate_back_to_top_scroll_speed', 'tu_back_to_top_scroll_speed');
function tu_back_to_top_scroll_speed () {
return 700;
.animate ({scrollTop: "20"}, 1000, 'swing');
}

Thanks
Sergio

Hi there,

Unfortunately that's not possible with the way our button is set up, as it's not using jQuery.

You could remove our javascript:

add_action( 'wp_enqueue_scripts', 'tu_remove_back_to_top', 20 );
function tu_remove_back_to_top() {
    wp_dequeue_script( 'generate-back-to-top' );
}

Then you can add your own javascript in the wp_footer hook (for example):

<script>
    jQuery( document ).ready( function($) {
        $( '.generate-back-to-top' ).on( 'click', function() {
            $( 'html, body' ).animate ({scrollTop: "20"}, 1000, 'swing');
        } );
    } );
</script>

Totally untested, but should get you started.

Hello Tom,

I have added the two codes that you have given me, but the result is not as expected: http://sergioratia.com/tienda-online/. When you click on back to top it behaves strangely.

In version 1.4 of GP if I could add it optimally. You used this code below and I just had to add the final line:

jQuery( document ).ready( function($) {
	var _amountScrolled = $( '.generate-back-to-top' ).data( 'start-scroll' ),
		_scrollSpeed = $( '.generate-back-to-top' ).data( 'scroll-speed' ),
		_button = $( 'a.generate-back-to-top' ),
		_window = $( window );

	_window.scroll(function() {
		if ( _window.scrollTop() > _amountScrolled ) {
			$( _button ).css({
				'opacity': '1',
				'visibility': 'visible'
			});
		} else {
			$( _button ).css({
				'opacity': '0',
				'visibility' : 'hidden'
			});
		}
	});

	$( _button ).on( 'click', function( e ) {
		e.preventDefault();
      $("html, body").animate({scrollTop:"20"},1000, 'swing');
	});
});

That exact code should still work fine, as long as the current script is removed. The original script is still on your page - maybe try clearing your caching plugin?

Hello Tom,

I have inserted the code that you have passed to deactivate the javascript with Snippets, is it the correct way to deactivate javascript?

Thanks
Sergio

Yes - I just adjusted it a bit to ensure it fires after the theme adds it, just in case.

Now it worked Tom! Thank you ;)

You're welcome! :)