Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #138560

    microarts
    Participant

    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/

    #138735

    Christopher
    Moderator

    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.

    #138736

    Christian
    Moderator

    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.

    #138860

    microarts
    Participant

    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.

    #138976

    Cousett
    Member

    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?

    #139204

    microarts
    Participant

    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

    #139779

    Zeshan
    Member

    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.