[Resolved] Change scroll-to-top button link

[Janne]

Hi,
I want to change the link to the scroll-to-top button. Is it possible to use something a bit more explaining? (want to please google).

Todays link:
https://premium.joyofmotioncrochet.com/product-category/womens-clothing-crochet-patterns/#

Is it possible to change to something like this?
https://premium.joyofmotioncrochet.com/product-category/womens-clothing-crochet-patterns/#top-of-post

[Fernando]

Try this PHP snippet:

add_filter( 'generate_back_to_top_output', function($output){
	$my_url = 'https://premium.joyofmotioncrochet.com/product-category/womens-clothing-crochet-patterns/#top-of-post';
	$output = sprintf(
				'<a title="%1$s" aria-label="%1$s" rel="nofollow" href="%6$s" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
					%5$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' ) ),
				generate_get_svg_icon( 'arrow-up' ),
				$my_url
			);
	return $output;
}, 10);

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

[Janne]

Looks like this code is only for this specific post. I want it to work the same on all my pages with back-to-top buttons.

[Fernando]

I see. Try this instead:

add_filter( 'generate_back_to_top_output', function($output){
	global $wp;

	$my_url = home_url( $wp->request ) . '/#top-of-post';
	$output = sprintf(
				'<a title="%1$s" aria-label="%1$s" rel="nofollow" href="%6$s" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
					%5$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' ) ),
				generate_get_svg_icon( 'arrow-up' ),
				$my_url
			);
	return $output;
}, 10);

[Janne]

Hi,
I have another question.
Is it possible to get a search button above or below the “Back to top” button? I have switched the search to the grow.me search.

I have also added the grow.me search on the top of the page with this css selector: .menu-bar-items. But now, when I click on the “subscribe” button on mobile, the search show up. What css selector can I use instead for this to work?

My site:
https://joyofmotioncrochet.com

[Fernando]

Hi Janne,

How specifically are you adding this search? Is it added as a Block or a Shortcode or some other way?

[Janne]

grow.me is an external service, and I have added some javascript code that runs on my entire site.
I have then added a css selector in the grow dashboard, I have now added this css: .menu-bar-items

Sorry for the late reply.

[Fernando]

I see. What we can do is have it fixed at the bottom, showing all the time. Would that work?

[Janne]

What do you mean with fixed at the bottom?

[Fernando]

The concept would be similar to this: https://share.getcloudapp.com/BluWzpKe

Where the search bar would be visible at the bottom all the time.

[Janne]

So it is not possible to get a button like the “go to top” to click on to get the search bar?

I also had another question, can I please get an answer to this:
I have also added the grow.me search on the top of the page with this css selector: .menu-bar-items. But now, when I click on the “subscribe” button on mobile, the search show up. What css selector can I use instead for this to work?

[Fernando]

It’s possible to have something similar to the back-to-top button which appears only as you scroll down. However, you would need custom Javascript for that which would be out of our scope of support.

Can you point us where we can see the subscribe button?

[Janne]

The link is on the right side of the header when you are on mobile. Only visible on mobile.

[Ying]

Hi there,

The button is inside the mobile header, so we can not use CSS to make it fixed at the bottom of the site.

Can you try adding this button to the after_header instead of menu_bar_item?

And can you give it a class, eg. subscribe-button?

Then you can add this CSS:

.subscribe-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

[Janne]

The “subscribe” button is now working, thank you.

What do you mean with the subscribe-button class and code?

[Author]

Posts