- This topic has 9 replies, 2 voices, and was last updated 4 years, 8 months ago by Leo.
-
AuthorPosts
-
July 16, 2019 at 11:44 pm #959899Thorsten
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 …
July 17, 2019 at 9:01 am #960340LeoStaffCustomer SupportHi 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 π
July 17, 2019 at 9:29 am #960388ThorstenHi 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
July 17, 2019 at 9:34 am #960397LeoStaffCustomer SupportHmm 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.
July 17, 2019 at 9:40 am #960406ThorstenOk, I will do the button on my own. Thanks for helping …
July 17, 2019 at 9:43 am #960408LeoStaffCustomer SupportYou 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-topJuly 17, 2019 at 10:14 am #960428ThorstenOk, I will check if that fit my needs … π
July 17, 2019 at 10:16 am #960431LeoStaffCustomer SupportSounds good π
July 19, 2019 at 7:09 am #961894ThorstenHi 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>
July 19, 2019 at 8:37 am #962074LeoStaffCustomer SupportHmm I’m not familiar with JS but I don’t think hooks should be used for that though.
-
AuthorPosts
- You must be logged in to reply to this topic.