Okay
  Public Ticket #1588145
Smooth Scrolling
Closed

Comments

  • Claire started the conversation

    Hi Qode,

    I am using your bridge theme software (again - it's great!) but am trying to make custom, smooth scrolling links throughout the site - I know how to make links work with anchor IDs using buttons and one-page setup as I've done that on previous projects, but this time I want images to be linked and when clicked, to scroll smoothly to another section on the same page, or on another page.

    Have spent a few hours trawling for fixes on my own but I need to bother you for help now - am just not finding an answer out there already.

    I am unable to share a link to the site in question as it is being developed offline still, sorry.

    Hope you can help. 

    Cheers,
    Claire

  •  1,366
    Qode replied

    Hi Claire, 

    This is not a basic usage of anchor links which are made to work with menu items, but it can be done.

    To set ID for the Row that you want to create a link to, use Anchor ID field (Row ID field should be empty): 

    https://monosnap.com/file/SBE30mxMrlekUEBBFgb5GP1cdj757c

    We'll assume that images are added using Single Image elements. 

    For anchor links to work properly, the < a > tags should have the 'anchor' class.

    This class has to be added with a bit of JS. Go to edit the Row that contains Single Image element(s) and add extra class 'add_anchor_link' (without quotes):

    http://screencast.com/t/NEUCqHtsj1

    ..save and update.

    Then add Raw JS element to the page via WPBakery page builder with this code: 

    <script type="text/javascript">
    jQuery(document).ready(function(){
    $j('.add_anchor_link .wpb_single_image a').addClass('anchor');
    });
    </script>

    You need one Raw JS for each page with buttons. Each containing Row should have 'add_anchor_link' class. 

    Hope this helps. 

    Best regards, 

    Ian

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Claire replied

    Thank you so much team Qode! It looks like it is working.
    I thought I had tried this solution already before contacting you, without any luck, but between late night work and tired brain, I must have messed something up.

    Following your instructions accurately = problem solved.

    Love your work!

  •  1,366
    Qode replied

    You are welcome Claire, we are glad that it works

    All the best, 

    Ian

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Claire replied

    Hi again team Qode,

    I have another question along the same lines of my last question below re smooth scrolling links to anchor IDs within same page. The last solution you provided worked really well, however I decided for SEO, readability and future translation reasons that I should not use static images with embedded text as navigational features, and have gone for the 'image with text over' element instead.

    Now I am running into the same problem - when I use this element, leaving the standard 'more info' text upon hover with my custom href details,  the links aren't functioning (they do nothing). I've tried applying the add_anchor_link class in the row containing the image with hover text elements and variations on the following js as separate element at bottom of the page:

    <script type="text/javascript">
    jQuery(document).ready(function(){
    $j('.add_anchor_link .q_image_with_text_over .desc. p a').addClass('anchor');
    });
    </script>

    Any chance you can point me in correct direction again?

    The site is still under development on my local server so I can't share a link.

    Thanks,

    Claire

  •  1,366
    Qode replied

    Hi Claire, 

    If this is a simple textual link, you could add the 'anchor' class manually to < a > tag without custom JS, via Text tab: 

    https://monosnap.com/file/fCPbtXqnycuFyfjNBHqqbThuZJdRbR

    If this does not help, send us the code of your page in a text file and we'll try to help. 

    Best regards, 

    Ian

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Claire replied

    Of course! So simple and it works like a charm. I was over-thinking it.

    Thank you so much once again!

  •  1,366
    Qode replied

    You are welcome Claire, we are glad that we could help. 

    All the best, 

    Ian

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode