Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Animate "Back to top"

Home Forums Support [Resolved] Animate "Back to top"

Home Forums Support Animate "Back to top"

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #525551
    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

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #525841
    Leo
    Staff
    Customer Support

    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.

    #526137
    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

    #526582
    Tom
    Lead Developer
    Lead Developer

    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.

    #528262
    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');
    	});
    });
    
    #528794
    Tom
    Lead Developer
    Lead Developer

    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?

    #530811
    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

    #531284
    Tom
    Lead Developer
    Lead Developer

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

    #531419
    geco

    Now it worked Tom! Thank you ๐Ÿ˜‰

    #531970
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.