[microartsParticipant]

I am trying to have the scroll top anchor link to a specific web page instead of scrolling back to the top. Can you help?

if you scroll down a tiny bit, you’ll see the calendar icon in lower right: http://microartsdev.com/needham/make-an-appointment/

[ChristopherModerator]

Hi there,
Please add the following CSS code under Customize -> Custom -> CSS:

.x-icon-angle-up:before {
content: "\\f073";
}
.x-scroll-top{
border:none;
}

Thank you.

[ChristianModerator]

Hey there,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[microartsParticipant]

when you click on the scroll top button, instead of having it actually scroll to the top of the page, i want it to act like a regular link and have it bring me to a specific page on my site.

[CousettMember]

I see a lot of anchors that are scrolling down on a page which anchor is it that you want to link to another page?

[microartsParticipant]

Sorry, I thought I was clear, it’s the “Scroll Top Anchor” that appears in the very bottom right of the page when you scroll down. The one controlled by _footer-scroll-top.php

[ZeshanMember]

Hi there,

It will require some template customization. To do so, please copy the file wp-content/themes/x/framework/views/global/_footer-scroll-top.php in your child theme’s folder /framework/views/global/, open the file in a text editor and replace the entire code with following:

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER-SCROLL-TOP.PHP
// -----------------------------------------------------------------------------
// Output for the scroll top button.
// =============================================================================

?>

<?php if ( x_get_option( 'x_footer_scroll_top_display', '' ) == '1' ) : ?>

  <a class="x-scroll-top <?php echo x_get_option( 'x_footer_scroll_top_position' ); ?> fade" href="http://www.example.com/" title="<?php esc_attr_e( 'Back to Top', '__x__' ); ?>">
    <i class="x-icon-angle-up"></i>
  </a>

  <script>

  jQuery(document).ready(function($) {

    var windowObj            = $(window);
    var body                 = $('body');
    var bodyOffsetBottom     = windowObj.scrollBottom();             // 1
    var bodyHeightAdjustment = body.height() - bodyOffsetBottom;     // 2
    var bodyHeightAdjusted   = body.height() - bodyHeightAdjustment; // 3
    var scrollTopAnchor      = $('.x-scroll-top');

    function sizingUpdate(){
      var bodyOffsetTop = windowObj.scrollTop();
      if ( bodyOffsetTop > ( bodyHeightAdjusted * <?php echo x_get_option( 'x_footer_scroll_top_display_unit' ) / 100; ?> ) ) {
        scrollTopAnchor.addClass('in');
      } else {
        scrollTopAnchor.removeClass('in');
      }
    }

    windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
    sizingUpdate();

  });

  </script>

<?php endif; ?>

Now replace http://www.example.com/ from the above code with your own link.

Hope this helps. 🙂

Thank you.

[Author]

Posts