CSS scroll down button


@GCarlD

Well-Known Member
Hi guys,

Please have a look at this: https://codepen.io/nxworld/pen/OyRrGy

You will find the above link contains code (HTML/ CSS/ JS) for 10 ‘Scroll Down’ buttons. I would like to add Scroll Down Button #3 centred at the bottom blue section of my hero banner on my site's homepage: hwww.graphicarldesign.com

How do I do this please? I do not know which code or how much of it to use in order to achieve this? I know I can input Custom CSS via the Wordpress Theme Options, is this where I should put the CSS code? (I tried, it did not work) Do I also need to add the HTML code?

Thanks,
Carl.
 

@GCarlD

Well-Known Member
Thanks Paul, do I need to use both the HTML and the CSS code?

Does the CSS code go in the Custom CSS via the Wordpress Theme Options? And the HTML in the body of the homepage via the text tab?

Or is it more complicated than that?
 

Paul Murray

Moderator
Staff member
The CSS should work if it's added as custom CSS, but you'll need to add the HTML too, wherever you want it on your page.

Code:
<a class=scroll-button href="[YOUR URL]><span></span>YOUR ANCHOR TEXT</a>
You could also add it through the editor using the 'Text view' tab since you're basically only adding a class name and a span to the 'a' element.
 

@GCarlD

Well-Known Member
Thanks so much! I'll give this a go tomorrow, fingers cross, I am a complete dumbass when it comes to code as I have said many times on this site :LOL:

Once I copy and paste the codes in their respective places, how do I specifically have the Scroll Down Button #3 centred at the bottom blue section of my hero banner? Or is this already set in the code?

EDIT: Also, I don't want the background of the night sky and mountains
 

Paul Murray

Moderator
Staff member
The button uses absolute positioning, which means it will need to be inside another container with its positioning set to relative, otherwise, it might look weird. I've updated the code to include this. Absolute positioning can be tricky sometimes so let me know if you have issues.

You can essentially ignore the CSS before the comment as this is purely for styling the background in the Codepen window. I've removed the background image and just used a solid colour for now.
 

@GCarlD

Well-Known Member
Thanks Paul, I messed up a bit along the way trying to reposition the button but I managed to correct my mistakes and get back on course, god knows how.

Have a look here: GraphiCarlDesign

Couple things:

1/ Is it possible to remove the word 'Scroll'? I think it's unnecessary, the pulsing icon is self-explanatory plus the tracking on the word 'Scroll' irritates me... I tried to remove the word via the HTML code, but the button vanished and that's where my earlier troubles started.

2/ When I click the button it takes me to the top of my homepage... can it be made to take the user to the section just under the hero banner where my 'GCD' logo is above the text?

Thanks so much!
 

Paul Murray

Moderator
Staff member
1. You can remove the text but be sure to keep the <span></span> section as this an integral part of the markup.

2. Just change the # to be the id name of the section you want to scroll to. So looking at your page structure, the section below your blue intro bit has an id called "content".

Code:
<div id="content" class="full"></div>
Simply set the URL to be #content and it should take you to that section instead. This works for any element on a page so long as it has an id specified in the HTML. It will instantly scroll the page so that element's top edge is at the top of the browser viewport. If you want a smooth scroll rather than an instant jump, you'll need to use Javascript to control this. There's probably a billion examples of this, just like this one. I'd be wary of scrolling too far and too fast as you'll give people motion sickness. A smooth scroll just to the element below is OK though.
 

@GCarlD

Well-Known Member
Ok I think I'm getting there slowly.

Changing # to #content didn't seem to work but #homeContent does. That's my one step forward, now for my two steps backwards.

As a result, the pulsing, down pointing circled arrow has vanished leaving the word 'Scroll'.

This is my updated code:
Code:
<div class="scroll-button-container"><a class="scroll-button" href="#homeContent">Scroll</a></div>
If I remove the word 'Scroll' the same thing happens. Where is <span></span> ?

Also, where do I paste the Javascript code?

 

Paul Murray

Moderator
Staff member
Use this mark up and it should work.

Code:
<div class='scroll-button-container'>
    <a class=scroll-button href="#"><span></span></a>
</div>
The Javascript should be included before the closing </body> tag either as an inline block of code (generally not the favoured method) or linked via an external .js file (here's how). Any javascript you use from somewhere like Codepen will need to be adapted so that it uses the same id names and/or classes as your own markup, otherwise, it won't work. I can try and adapt the button example later to include scrolling too if you get stuck.
 

@GCarlD

Well-Known Member
Right, I've got the first part of the button sorted and managed to centre its positioning via the CSS code :eek:

Now to tackle the JS.

But wait, another issue, it's like whenever I make progress, something else goes wrong:
Screen Shot 2017-05-04 at 15.45.49.png

All of my services headings are no longer centred? I think this must of happened somehow from me sorting out the codes for the scroll button???
 

@GCarlD

Well-Known Member

@GCarlD

Well-Known Member
But wait, another issue, it's like whenever I make progress, something else goes wrong:
View attachment 5207

All of my services headings are no longer centred? I think this must of happened somehow from me sorting out the codes for the scroll button???
Please ignore this latest issue, I have managed to fix it by some miracle, it was some custom CSS code that I had messed up. The headings are now centred again :)
 

@GCarlD

Well-Known Member
I got the scroll down button working. I used a plugin! :D Even comes with a 'Back to Top' button.

Thanks for all your help though Paul, I really appreciate it :)
 
Top