Unbounce Answers/FAQ/Page Builder - Pro Tips

How do I add smooth scrolling links (and buttons)?

Ryan Engley
posted this on July 20, 2012 01:44 PM

 

 

You can add smooth scrolling links and buttons to your page with a little Javascript.

Open your Javascripts dialog via the tab in the bottom left of the Unbounce Page Builder and paste the following code:

 

 

Now you can select any object or page section as the destination for a smooth scrolling link.

Copy the Object ID from the Properties Pane on the right of the page builder (e.g. #lp-pom-block-9).

For a button: Paste the ID as the Link for your Click Action.

For a text link: Paste the ID as URL for your link.

 

Now just Save and Publish your page and you'll see the smooth scrolling in action!

 

Comments

User photo
Daniel Tegnander

Awesome tip!

When I add a button, the page scrolls down, but simultaneously leaves the site to www.mypage.com/clkn//
Why is this and how do I fix it?
 

October 24, 2012 06:14 AM
User photo
JP Schoeffel

Hmm, maybe I did not drink enough coffee this morning, but why in the world would I have to add javascript, mess with divs and so on when it's a basic html tag that I am using for nearly 17 years. Wouldn't it be just simpler to be able to link a button or image to #myanchor and on the other end assign an anchor to any element I want?

 

Sorry if I missed something, but I just don't understand why you rewrite you can't detect an anchor link from a regular link (and why you would rewrite those when I don't track them). Not really convenient for something really useful.

October 24, 2012 07:04 AM
User photo
Ryan Engley
Unbounce

Daniel - thanks so much.  The method demonstrated in the video only works for text links since you can't get in and edit the class of a button.  You could use Chester's method which allows you to use images instead of just text links.


JP - I opted to demonstrate with divs since it's slightly easier for inexperienced users who aren't comfortable editing the source code in text blocks.  It's based primarily on feedback I'd got when coaching users through this before I put the article together.  But you're right, there's no reason you couldn't do exactly what you've been doing for 17 years.  However, the smooth scrolling method shown above is different than plain anchor links in a page.  Anchor links jump immediately to the anchor whereas smooth scrolling links demonstrate where on the page you're scrolling to.  It's really just a matter of personal preference.

October 25, 2012 05:17 PM
User photo
JP Schoeffel

Thanks Ryan. I noticed the difference between this smooth scrolling and pure anchor link... however since we can't do any internal page linking using anchor it's the only solution I found (and it works quite well). So, if there was a way to just assign an anchor to an image (it's not the biggie since we can create an html block and add the anchor there), but at least use the url field to hyperlink anything to an anchor. I am still confused why this is not allowed. 

October 26, 2012 02:47 AM
User photo
Ryan Engley
Unbounce

Hey JP - right now there just isn't a way to edit the HTML of page elements like images.  That's why I recommend the workaround using a custom HTML block instead.  Further down the road though, adding custom tags to images and page objects is something we'll likely tackle.  If you've got any ideas for how you'd like to see that feature work, we'd love for you to share your comments in our community feature request forum.

November 08, 2012 04:13 PM
User photo
Brady Josephson

Great stuff here. Everything works great... except on the mobile phone. When I click the image in starts to scroll but then refreshes the page and reloads. It does not do this on the iPad however. Something in the script? Something else I can do?

November 30, 2012 02:15 PM
User photo
Ryan Engley
Unbounce

Hi Brady - I haven't tested this feature on mobile but if it doesn't seem to be working quite right, one alternative would be to forward your mobile visitors to a mobile specific page instead (without the smooth scrolling code).  We've got a post over here  that explains how you could go about doing that.

December 03, 2012 12:56 PM
User photo
Thomas van Wijk

The simple way to have more then one button is adding more classes, so you can set more then one button to go to different targets

 

    $(".scroll, .another-class").click(function(event) {

January 29, 2013 02:34 AM
User photo
Finge Holden

I have really been struggling with this, and I am finally caving in and asking for help ;-)

I want to use Chester's method and simply point to a form on a page from a button up top. Based on the comment from Chris I was under the impression this would work.

  • Anchor link added called 'form' using custom html and div id="form"
  • Added script as specified below in the head section
Please help!
Here is the script

<script>
$(document).ready(function(){
$("#lp-pom-button-102").click(function(event){
$('html, body').animate({ scrollTop: $("#form").offset().top }, 1000
});
});

$(document).ready(function(){
$("#lp-pom-image-108").click(function(event){
$('html, body').animate({ scrollTop: $("http://unbouncepages.com/tannen#skjema").offset().top }, 1000);

});
});
</script>

March 18, 2013 07:00 AM
User photo
Finge Holden

Sorry - the script is as follows of course:

 

<script>
$(document).ready(function(){
$("#lp-pom-button-102").click(function(event){
$('html, body').animate({ scrollTop: $("#form").offset().top }, 1000
});
});

</script>

March 18, 2013 07:01 AM
User photo
Finge Holden

Sorry - forgot the link to the preview http://unbouncepages.com/tannen/

If any administrator is able to tidy up this mess of mine here on the forum, please do so ;-)

March 18, 2013 07:03 AM
User photo
Jayme Self

If you want to be able to click on a button and have it smooth scroll to another part of the page, all you have to do is create the anchor and script as described, and then for the URL, just put #pricing instead of the URL. Hope it helps! Took me a while to figure out why the whole URL wouldn't work, but this seems to!

March 22, 2013 06:05 PM
User photo
Finge Holden

Thanks Jayme! I finally figured it out actually - however I have another issue. When I click the link the page does a little flash, and I don' understand what is causing it. Any tips highly appreciated. Try one of the buttons on the draft page here http://hello.conversionlab.no/v3

March 23, 2013 12:39 AM
User photo
Jayme Self

Hi Finge. Sorry, I have no idea what that flash is about! Just so you know - looks like you have smooth scrolling set up for the two buttons at the top, but not for the ones further down the page yet. 

March 23, 2013 09:04 AM
User photo
Finge Holden

Thanks for the heads up, it's still work in progress :-)

 

If anyone else has hints on the flashes, please let me know.

March 23, 2013 09:25 AM
User photo
Brad Christi

Ryan, this won't work in a browser but works in my preview.  Currently I have my cname as www, in order to make sure when some types my url without www. before it, I also have my full url www.xys.com forwarding to www.xys.com(the unbounce version with the www as the cname.  Does that throw off the anchor link in the url?

May 04, 2013 11:48 AM
User photo
Laura Kassovic

Hey, the proper script for the button scroll is:

<script>
$(document).ready(function(){
$("#lp-pom-button-108").click(function(event){
event.preventDefault();
$('html, body').animate({ scrollTop: $("#sign_here").offset().top }, 1000);
});

});
</script>

** Do not forget the line "event.preventDefault()" .  Else, it won't work.  Took me a while to figure it out.  **

July 21, 2013 12:28 AM
User photo
Ryan Engley
Unbounce

That's great Laura - thanks for the tip

July 22, 2013 12:15 PM
User photo
Aaron Robinson

Anyone have any luck getting the smooth scrolling to work with buttons (Chester, thanks for sharing the code!) without a flash or other strange behavior?  I have it close to working, but still see the flash and it seems like strange behavior (www.marchingventures.com). 

July 31, 2013 02:48 PM
User photo
Laura Kassovic

Aaron, I tried you page using both Chrome and Safari.  Don't see any flash.

August 02, 2013 12:33 AM
User photo
Aaron Robinson

@Laura Thanks for taking a look!  Unbounce support fixed it for me last evening.  

August 02, 2013 08:03 AM