Smooth Scrolling for jumplinks?

  • 12 April 2012
  • 6 replies
  • 18 views
Scott

Has anyone gotten any kind of Smooth Scrolling jquery to work on their pages for jumplinks? If so, how did you do it? thanks!!

6 replies

B

I’ve used Scroll.js successfully to accomplish your goal.

In “Scripts”, I add this code so the placement is in the ‘HEAD’ section of the page:
<script type="text/javascript" src="https://s3.amazonaws.com/js/scroll.js"></script>

I obfuscated the actual location of the file to avoid future challenges (sorry!!) but you can find the original script at
http://archive.plugins.jquery.com/pro…

I then add anchors to my page. I like to have a little white space between the anchor and the actual beginning of the content, so it doesn’t look jammed. This means I create a text box that measures 50px wide by 17px tall, no borders, transparent background. For an anchor named “howitworks” I use the following:


&nbsp;

Finally, to create the HREF itself, I use this code:
How Does This Work?

Ta-daaaaahhhhh!! You should be the proud coder of a working Unbounce scroll.

The biggest issue that I run into with Unbounce is that sometimes I can edit a page and find that a script stops working. For me, this usually means I’ve added another script that somehow conflicts with scroll.js. I’ve tried to debug the problem by re-arranging or deleting scripts outright but this doesn’t always work. Quite frankly the only way I’ve been able to counteract this with certainty is to laboriously re-create the page from scratch.

Let me know if you have any questions.

Scott

brian, thanks so much for the help! I still can’t get it to work though. I essentially copy/pasted everything you said, but it’s just jumping to the links w/out animation.

I’m wondering if I have the wrong link for the script? can you help me out with that? I tried hosting the script on my own server and renaming it ‘scroll.js’ and i tried all the scripts from the page, but it still won’t do anything. Any ideas on what I could do or do you have a working link for the script for me to test? thanks so much!

B

Sorry I wasn’t clearer.

I did not include the actual location in my script – I host that script at my expense for my customers.

Go to the link I provided and follow the instructions there to get the script.
http://archive.plugins.jquery.com/pro…

Scott

Brian thanks for all your help. Could I just ask to see a page you or anyone else has done on unbounce that uses smooth scrolling? I just want to see it in action.

D

How do you host your own script? Where can I easily do this?

Thanks,

Ben_Chutz

There is a much easier way to do this that takes half a second.

Add the code below as a Javascript and set placement to Before Body End Tag. Then in the page editor, copy the ID of the element you want to jump to (this can be found by clicking in/on the element, ie button, text, container, etc, and in the right sidebar Properties > Element Metadata > Id), and paste it in the URL field of the element you’re linking (ie image, button, etc, and in right sidebar Properties > Click Action > URL).

And that’s it. Once published, the element you linked will smooth scroll the visitor to wherever on the page you told the button to take them.

You can also see this in action on our Birdhouse Health homepage. Click the down arrow just above the fold.

Source: http://www.disruptiveadvertising.com/graphic-design/5-easy-unbounce-codes-to-upgrade-your-landing-pa…

Reply


Terms & ConditionsCookie settings