[Resolved] Animate "Back to top"

[geco]

Hello,

I would like to add this animation “.animate({scrollTop:”20″},1000, ‘swing’);” of js in this code:

add_filter( ‘generate_back_to_top_scroll_speed’, ‘tu_back_to_top_scroll_speed’ );
function tu_back_to_top_scroll_speed() {
return 700; // milliseconds
}

can someone help me implement it?

Thanks
Sergio

[Leo]

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.

[geco]

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

[Tom]

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.

[geco]

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');
	});
});

[Tom]

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?

[geco]

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

[Tom]

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

[geco]

Now it worked Tom! Thank you 😉

[Tom]

You’re welcome! 🙂

[Author]

Posts