Archived topic

additional class to back to top button

9 replies · Started by Thorsten on July 16, 2019

Viewing posts 1–10 of 10

July 16, 2019 at 11:44 pm #959899

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

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 :)

July 17, 2019 at 9:29 am #960388

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

July 17, 2019 at 9:34 am #960397

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.

July 17, 2019 at 9:40 am #960406

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

July 17, 2019 at 9:43 am #960408

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

July 17, 2019 at 10:14 am #960428

Ok, I will check if that fit my needs ... :)

July 17, 2019 at 10:16 am #960431

Sounds good :)

July 19, 2019 at 7:09 am #961894

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>

July 19, 2019 at 8:37 am #962074

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

This archived topic is closed to new replies.

Start building better websites today.