Scroll top anchor — formatting & having it show up

Support
#1

Hello. I have turned on scroll top anchor and set it for 50%. Two questions:

  1. How can I format its color so it shows up on white as well as dark backgrounds?
  2. Why doesn’t it show up on iPhone 4?

If I need to change the CSS, where do I do that so it is global?

Thanks.

#2

I have changed the % for when the scroll top anchor to 1% so it shows up fairly soon after a page is scrolled. So I think #2 is answered. However, I would like the icon to show up as soon as the first screen amount has been scrolled (i.e., as soon as someone starts to scroll down the page). Is there a way to do that?

#3

If formatting the scroll top anchor requires CSS, I’d like the border of the box to be 1 px wide, and the color for the box and the up arrow to be rgb(183, 152, 91). Thanks.

#4

Hi there,

Thanks for writing in.

You mean it should start hidden but will start displaying when the users start scrolling? Sure, please add this code to your global custom javascript.

jQuery( function($) {

$(window).scroll( function(){

if ( $(this).scrollTop() > 0) {

$('.x-scroll-top').toggleClass('in').attr('style', 'margin-bottom: 0 !important; opacity: 0.375 !important;');

}

} );

} );

As for styling, please add this CSS

.x-scroll-top {
    right: 10px;
    color: rgb(183, 152, 91) !important;
    border: 1px solid rgb(183, 152, 91) !important;
    border-radius: 0px !important;
}

Thanks!

#5

Thanks for your responses. I’ve added the CSS styling to the style.css file in my Pro Child theme. However, it looks like the border of 1px is too thin. I’ve tried changing it to 2px, but the border width does not change in the browser (even after clearing the cache). Any idea why?

I haven’t had to add global custom javascript before. Where do I do that?

Thank you.

#6

Hello There,

I have checked your site and I can see that the border is already 2 pixels. Please adjust to 5 or more just to test if it is working in your end or not.

If you need to add a JS script, add the code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript.

By the way, I can see that you have Endurance Page Cache enabled. Please clear or flush the cache first before testing your site. You must clear your browser cache as well or make use of the private browsing mode in testing your site.

Please let us know how it goes.

#7

Thank you. The change to 2px had been applied, but I hadn’t realized that the Endurance Page Cache was on. I’ll check with our hosting provider about this.

#8

You’re welcome! And yes, could be cache.

#9

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