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.
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):
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):
..save and update.
Then add Raw JS element to the page via WPBakery page builder with this code:
$j('.add_anchor_link .wpb_single_image a').addClass('anchor');
You need one Raw JS for each page with buttons. Each containing Row should have 'add_anchor_link' class.
Hope this helps.
Sign up for our newsletter :)
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!
You are welcome Claire, we are glad that it works
All the best,
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:
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.
If this is a simple textual link, you could add the 'anchor' class manually to < a > tag without custom JS, via Text tab:
If this does not help, send us the code of your page in a text file and we'll try to help.
Of course! So simple and it works like a charm. I was over-thinking it.
Thank you so much once again!
You are welcome Claire, we are glad that we could help.