[Resolved] additional class to back to top button

Home Forums Support [Resolved] additional class to back to top button

Home Forums Support additional class to back to top button

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #959899
    Thorsten

    Hi, the subject tells it all: I need an additional class for the back to top button, but I can’t find the right place to add it. I use the snippet plugin also, so maybe some custom js will do the magic. Or directly into the themes’ php file (but where can I find the right place?).

    Any ideas? Thank you …

    #960340
    Leo
    Staff
    Customer Support

    Hi there,

    Try this PHP snippet:

    add_filter( 'generate_back_to_top_output', 'tu_custom_back_to_top_icon' );
    function tu_custom_back_to_top_icon() {
        printf(
    		'<a title="%1$s" rel="nofollow" href="#" class="generate-back-to-top CUSTOM-CLASS" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
    				<span class="screen-reader-text">%5$s</span>
    				%6$s
    			</a>',
    			esc_attr__( 'Scroll back to top', 'generatepress' ),
    			absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
    			absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
    			esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
    			esc_html__( 'Scroll back to top', 'generatepress' ),
    			generate_get_svg_icon( 'arrow' )
    	);
    }

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know πŸ™‚

    #960388
    Thorsten

    Hi Leo,

    thanks. The class is applied, but my wish behind all of it doesn’t take effect. I use the scroll to id plugin and want to let the back to top button run as smooth as my menu where I use the additional “ps2id” class to let the magic work. The class “ps2id” applied to the back to top doesn’t do anything…

    Thorsten

    #960397
    Leo
    Staff
    Customer Support

    Hmm I don’t think that’s how it would work as our back to top script is still executing.

    If you want to use the script from another plugin, you’d basically need to create your own back to top button.

    #960406
    Thorsten

    Ok, I will do the button on my own. Thanks for helping …

    #960408
    Leo
    Staff
    Customer Support

    You can change the speed of our back to top button with a filter as well if that helps:
    https://docs.generatepress.com/article/back-to-top-button/#change-how-fast-it-scrolls-you-to-the-top

    #960428
    Thorsten

    Ok, I will check if that fit my needs … πŸ™‚

    #960431
    Leo
    Staff
    Customer Support

    Sounds good πŸ™‚

    #961894
    Thorsten

    Hi Leo,

    well I made a little snippet on my own that’s working fine on a single file for itself (see below), but using hooks in generatepress to add this causes nothing but js errors (ReferenceError: Can’t find variable: $). Maybe I’m too stupid after quite a long week … any ideas?

    That’s my file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	
    	<title>show onscroll</title>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script>
    	window.onscroll = function()
    	{
        if( window.XMLHttpRequest ) {
            if (document.documentElement.scrollTop > 150 || self.pageYOffset > 150) {
                $('#btt').fadeIn();
            } else if (document.documentElement.scrollTop < 150 || self.pageYOffset < 150) {
                $('#btt').fadeOut();
            }
        }
    }
    </script>
    	<style type="text/css">
    
    a#btt {
    	background-color: #000;
    	display: none;
    	padding: 8px 14px 8px 14px;
    	border-radius: 3px;
    	color: #FFF;
    	position: fixed;
    	z-index: 10;
    	right: 30px;
    	bottom: 80px;
    	opacity: 0.38;
    	font-size: 14px;
    	
    }
    a#btt:hover {
      opacity: 0.4;
    }
    
    body {
      min-height: 2000px;
    }
    </style>
    </head>
    <body>
    	<p>scroll down</p>
    	<a href="#" id="btt">to top</a>
    
    	</body>
    </html>
    #962074
    Leo
    Staff
    Customer Support

    Hmm I’m not familiar with JS but I don’t think hooks should be used for that though.

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