Homepage › Community Forums › Aspire Theme Support › Scroll Down Button
Tagged: aspire pro, genesis, scroll button
Hello,
I would like to know how to include a scroll down button on the front page of my website, similar to what you have on the landing page here: https://appfinite.com
Thank you!
Are you talking about the Anchor link?
If so, you can add the content that you want to link to and assign an ID to that div like this –
<div id="front-page-2">Sample Content Sample Content Sample Content</div
Next, create your Anchor like this –
<a href="#front-page-2">
<span class="arrow"></span>
</a>
You can style it with some CSS if you want the design to look a certain way. There are more jquery effects that you could add, but that would require adding some javascript and/or linking to javascript files hosted online that would provide those effects.
Also, I forgot to mention, if you want to link to a specific widget section that already exists on your homepage, then you won’t need to create the first part since it already exists. You would only need to create the Anchor and link it to the section you want it to jump to.
Let me know if that helps.
Hi Wes,
Where do I add that anchor link code? I added it under widgets Front Page 1 as custom HTML, but nothing came up?
Thank you!
Are you referring to the first Link (the arrow on my site)? Which location did you plan to have that added in?
Next, which part of your site did you want that to link to? Front-Page-2, 3, 4?
Hi Wes,
Yes, that’s right. I’m referring to the first arrow right below “View Themes” and “Hire Us”. I would like it to go to front-page 3
Hi Wes,
Thank you- the arrow design is perfect.
However, I haven’t been able to figure out where to add the Arrow with circle border and the CSS. Is it under editor -> style.css?
You can add the arrow code inside your widget section (wherever you want it to appear on your homepage)
Add the CSS inside your style.css file or you can add it in your Custom CSS page. Go to – Appearance > Customize > Additional CSS
Hi Wes,
Thank you, everything is appearing now. One more thing: in the widget, the arrow appears very high at the top. I tried moving it down using top: 250px but the arrow gets cut off. In other words, the arrow is in the center of the page, but only half of it appears. If I move it further down it completely disappears.
How can I get the arrow at the bottom of the front-page 1 widget?
Hi Wes,
I was able to get it by adding multiple text widgets in front-page 1 with the div code. Thank you!
Sounds good. Let us know if you need anything.
