Site logo

Archived topic

Scroll to a section from a page

15 replies · Started by Bestiale on October 25, 2018

Viewing posts 1–15 of 16

Hello,

I need your help on how should I change my buttons on the website, so when I click on the button to go to a particular section from the page.

So, on this page Services, from the "Learn more" button from "Maintenance and repair" service, I want to go directly on the section "Maintenance and Repair" on the service. I already put an ID on the column of the "Maintenance and Repair" section, but I can't figure out how can I put the link in the HTML code.

Right now I am using this HTML code:

Could you help me how can I do that?

Thanks!
Iliyana

Hi there,

Use this as the link:

yoursite.com/#ID-here

So if your ID is services, your link would be:

yoursite.com/#services

Hi,

I don't find the option to put a link. Can you tell me where I should look for that?

Thanks!
Iliyana

Hi there

cant access the site url you have provided, would be good to see the page to help. Any chance you can allow us access?

Hi,

Now you should be able to see it.

Thanks!
Iliyana

Are you having trouble finding where to add the actual link to the page? If so, it looks like you're using Beaver Builder, so they should have a button module that gives you a field to add the link to.

Let me know :)

Hi Tom,

Yes, I am using Beaver Builder and unfortunately, there isn't button module that I can use. I've already checked several times.
Last time when I want to include a button in my website, you guys, sent me this HTML text:

<a href="http://testsite.bestiale.net/services">Learn More </a>

I use it and it worked perfectly. Now I want this button to point into a particular section of the page but I can't figure out how to change the HTML text. I tried several things but they don't work.

Can you help me how can I change the button so it can point to a particular section of the same page?

Thanks!
Iliyana

Gotcha.

This part of the HTML is what you want to change: http://testsite.bestiale.net/services

So lets say you want to link to an ID you named: services

You would do this:

<a href="http://testsite.bestiale.net/#services">Learn More</a>

Hi Tom,

This solution doesn't work. I put ID: service and add the text that you propose in the HTML code, but when I click on the Learn More button, it directs me to the Home page, and not to the text that is below this button.

Do you have some other solution?

Iliyana

Ah, that's because you're on the service page, and you're linking to the home page.

Your link should look like this:

<a href="http://testsite.bestiale.net/service/#services">Learn More</a>

Hi Tom,

Thanks.
It worked but it doesn't look good. When you press the button for Maintenance and repair, the page scrolls down to the text, but the headline is just below the heading of the website. You can see the same thing when you press the button for Performance Tuning.
And sometimes, when you test it a few times, the header of the Tuning text is hiding behind the header on the website.

How can I fix that?

Iliyana

Hi there,

I'm not sure I'm seeing that - can you show me a screenshot of what you mean?

Hi Tom,

Please see the two screenshots.
Service screen shot
Tuning

Something that I noticed is that when I open the website from a Guest browser, everything looks great. But when I open it from the browser that I am using every day, the result when I pressing the button is like the screenshot that I sent you.

How can I fix that?

Iliyana

I think you're just getting a slightly different view when logged in because of the admin bar.

When you log out, the admin bar goes away and everything works.

I see. ok. thanks.

This archived topic is closed to new replies.