Scroll top anchor conflict

Support
#1

Hi there,

Scroll top anchor not displaying on one page with revolution slider.
https://pvoglobal.com/home/

#2

Hello Alessandro,

Thanks for writing in!

I have checked your setting and it turns out that the Scroll to Top button was disabled.

I went ahead and enabled the setting. I also found out that your custom footer is covering the button. I was able to resolve the issue by updating your custom css. I ended up using this code:

body .x-scroll-top {
    border: 2px solid #000000 !important;
    color: #000000 !important;
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    zoom: 1 !important;
    z-index: 160000;
    margin-bottom: 0;
}

Please check your site now.

#3

AMAZING, thank you. It works wonderfully, thank you very much.

#4

You’re most welcome!

#5

but one more thing, THe anchor bottom is visible all the way through as I’d like it to just appear 75% of the page.

#6

Hey Alessandro,

To fix this, first add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.x-scroll-top').addClass('hide-scroll-top');
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0.60 * $('body').height()) {
			$('.x-scroll-top').removeClass('hide-scroll-top');
		} else {
			$('.x-scroll-top').addClass('hide-scroll-top');
		}
	});
});

Then add the following code in the Theme Options > CSS:

.hide-scroll-top {
    display: none;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

it worked but now it disappears after scrolling in all the other pages, here’s an example:

https://pvoglobal.com/event/

#8

Hi Alessandro,

That’s happening because of the dynamic calculation of the height 0.60 * $('body').height() you can replace the JS script with the following:

jQuery(document).ready(function($){
	$('.x-scroll-top').addClass('hide-scroll-top');
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0.1 * $('body').height()) {
			$('.x-scroll-top').removeClass('hide-scroll-top');
		} else {
			$('.x-scroll-top').addClass('hide-scroll-top');
		}
	});
});

This should work in all pages now, if you still face any issue then replace this part 0.1 * $('body').height() with a static height e.g 300 so your code will look like this:

if ( $(this).scrollTop() > 300 )

You can then adjust 300 as you need. Hope this helps!

#9

Hi Thank you! But when I apply the----> if ( $(this).scrollTop() > 300 )
The anchor still is visible above the page. Example: https://pvoglobal.com/pvo-dc-2019/

#10

Hello Alessandro,

I have resolved the issue for you. I removed the JS code and have updated the custom css code into this:

body .x-scroll-top {
    border: 2px solid #000000 !important;
    color: #000000 !important;
    filter: alpha(opacity=50) !important;
    zoom: 1 !important;
    z-index: 160000;
    margin-bottom: 0;
}

body .x-scroll-top.in {
  opacity: 1 !important;
}

I also made sure that the scroll to top button will only appear once you scroll the page at 75% of its total height.

Please check your site now.

#11

Thanks buti I still see the anchor throughout the entire page instead of just appearing at 75%
Can someone check?
https://www.pvoglobal.com/home

#13

Hey Alessandro,

It’s because of the custom CSS. I commented it out and at first, the Scroll To Top button still didn’t work because there are Javascript errors caused by Slider Revolution and Jetpack so I followed this troubleshooting guide by ThemePunch and deactivated Jetpack and now the button works as intended. Please watch the screencast below.

Because the Scroll To Top button’s z-index value is currently 1031 by design and the Pro Header and Footer builder bar’s z-index is 9999 by default, you need to reduce 9999 to 1030 or lower.

If you wish it to stay on 9999, you only need this CSS to be added in Theme Options > CSS.

.x-scroll-top {
    z-index: 10000;
}

Lastly, please note that some features of our theme is powered by Javascript so any JS conflict that third-party plugins introduce has the potential to break our theme’s features. Please test for a plugin conflict next time as advised in our How to Get Support article.

Hope that helps.

#15

Hi Christian Thank you It works but it is transparent and the color i’d like to change
Also noticed it does not show up on the https://www.pvoglobal.com/home" page

We also need jetpack, so you mean it won’t work unless jetpack is deactivated?

#16

I installed a plugin instead to protect the custom CSS and enable the jetpack. Thanks so much for the help!

#17

You’re welcome, Alessandro. Regretfully, Jetpack has a lot of features. If you have a chance to find the specific feature that is conflicting with the Scroll Top button, you can report it to us and so we could try to replicate it and then we’ll report to our development team in case there’s an issue. Please just note that we can’t guarantee compatibility but we’ll see what we can do.

Regarding the CSS, it might not be the whole custom CSS that is causing the issue so you can find what specific property and remove it. I just quickly showed the block of CSS that’s causing the issue as further helping with custom CSS would be veering into custom development which is not a part of our product support.

Thanks.

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.