How do I add custom scroll down code?

[tyang82]

I am trying to add the following to my Weebly Site:

http://codepen.io/anon/pen/aJYEPz

Not sure how I can put all the codes in Weebly.

It's a custom animated scroll down. Would apprecite some help!

Thanks!

[Queso]

Hey there! It looks like you're going to want to edit the theme code to make that work. I wouldn't be able to advise you on it directly, but there are several tutorials out there, and our Community here can point you in the right direction if you'd like to get into coding.

[tyang82]

Thanks @Queso!

How can I reach out for some help? 

Sorry I am new here =/

[Adam7]

Is that something you want to add for your whole site, or just to a particular page @tyang82?

[tyang82]

Hi @Adam,

I just want to add it on the home page.

Thanks!

Tony

[Adam7]

Ok, what code were you trying to add?

[tyang82]

Hi @Adam,

This is what I tried...

I tried adding the css code from codepen.io/anon/pen/aJYEPz to the styles folder, then I tried embeding the html code on the hero part of the home page:

<div class="mouse"></div>
<p>Scroll</p>

doublegentertainment.weebly.com

I'm not sure actually where I should be putting the codes properly. Sorry I'm not good with codes.

[MJCS]

Hi. What you're trying to do is certainly possible. 

The first thing you need to do is change the word Scroll from a paragraph element to an <a> link with a link to an 'id' tag not a class tag. You could also do this with a Weebly button instead of custom html, but uncheck the 'open in new window' box. 

You do however need to use custom html to create the 'landing' ID that will be the landing point of the scroll. 

There's an example on one of my sites: www.bpac.com.au

Click in the arrows to scroll.  I'll add the code I used in the next comment box.

[MJCS]

In the header section (or wherever you want the scroll to start) create a custom HTML field and add: 

<a href="http://www.bpac.com.au/#bch">
Scroll
</a>

In the above you'll need to change the web address to suit your web address. Unfortunately this won't look great so you'll need to add 'style' markup to the custom HTML box - I can help with that too but I'd need to know what you're after in terms of font-family, color, size, etc.

And below that where you want to scroll to:

<h2 id="bch">
Brighton Concert Hall
</h2>

You would again need to change the content to suit your requirements. The important thing is the id="bch". The content between the " " needs to be the same as the #tag that you used in the above markup. It can be almost anything, but they need to be the same in order to link.

I should point out that this is really going to be a quick 'jump' to the second tag. If you want scrolling to be smooth, it can be quite a bit more complicated and involve 'jquery', but the link below will set you in the right direction:

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

Regards, Mark

[MJCS]

@tyang82, I forgot to mention that the codepen that you were looking to was only demonstrating the animated mouse movement - not any scrolling. Once you have the scrolling working, you could add the animated mouse in the link but once again it will require a bit of help.

Generally those examples need modification to work out of the codepen environment. They usually have more markup than required, or it is specific to that example.

Best of luck,