Unbounce Answers/Next Steps/Tips & Tricks

How to Create Smooth Scrolling Anchor Links [VIDEO]

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

You can add smooth scrolling anchor links to your landing pages with some javascript and a wee bit of HTML.  

All in all, you'll need to:

  1. Add the javascript
  2. Add anchor (target) tags
  3. Link to the anchors tags

Watch the video below to see how!

 

 

Step 1 - Add the Javascript

Add the following code to your page's Javascripts dialog and choose "Head" for placement.

<script>

$(document).ready(function(){
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysitecom/index.htm#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 1000);
	});
});


</script>

 

Step 2 - Add Anchor Tags

This is the point that the links will scroll to.

Add the following code to your page as a custom HTML object. Customize the ID to an appropriate value (you'll need this ID in Step 3).

Note: The IDs are case sensitive.  It's a good idea to keep them all lowercase.

<div id="CUSTOMIZE_ID" style="width:20px;height:20px;">&nbsp;</div>

Repeat Step 2 to add anchors wherever necessary in your page.  They must all have unique IDs.

Step 3 - Link to the Anchor Tags

Add text links that will scroll to the anchors you created in Step 2.

Let's say that your page's URL were http://promos.cheapelephants.com/main/ and the ID for the anchor you created in Step 2 were "pricing",  you would add a text link to the URL http://promos.cheapelephants.com/main/#pricing.

To to this:

  1. Open the text editor and highlight the text you want to convert into a link.  
  2. Click the Link icon and type your anchor's URL in the link field.  
  3. Click the Advanced tab.
  4. Add the value "scroll" to the Stylesheet Classes field

    stylesheet-classes-scroll.png 

That's it!

You can now republish your page and verify your changes at the published URL.  If you have any questions or comments, post them below or email support@unbounce.com
 

Comments

User photo
Chester Bailey

Procedure of having the animated scrolling for both text and images

I paid a guy on Odesk to figure this out for me since I wanted scrolling to work with images as well. Hope someone else finds this helpful.

    1. Import the images or text and place it anywhere in the template. Then you can see every image or text you have imported has a different “ID” like: “#lp-pom-image-91” or "#lp-pom-text-103". You can find the ID in the Advance Properties.

    2. Now open a style sheet from the upper tab. Name your style sheet to anything. Then write the code like the following:

      			 <style>
			  #lp-pom-image-91{
			  	position:fixed !important;	/*setting the object staying at fixed point always in a window.*/ 
			  	top:100px !important; 		/*setting that the object will fixed on 100px from top.*/ 
			  	left:10px !important; 		/*setting that the object will fixed on 10px from left.*/  
			  	cursor:pointer !important;}	/*setting the cursor in pointer mode to give the object a vive of having linked up.*/		
			 </style>

      Now do the same style of every id of every image or text. Note that every image or text shoud be diferent top value otherwise they will overlap to each other.

    3. Now you need to set some bookmark in the pages. To do so open the HTML and write the following code in the HTML:

      			<div id="home" style="height:1px; width:1px;"></div>

      You can write anything in the id section. Like i put "home". After writing the code, press embed and place the box anywhere in the body where you want to scrolled to. Embeded as many as bookmark you want to used in you page. Rembember for every of these bookmark there should be atleast one navigation image, button or text in the template.

 

Say for In my template my images style are:

			<style>
			  #lp-pom-image-91{position:fixed !important; top:100px !important; left:10px !important; cursor:pointer !important;}
			  #lp-pom-image-92{position:fixed !important; top:167px !important; left:10px !important; cursor:pointer !important;}
			  #lp-pom-image-93{position:fixed !important; top:234px !important; left:10px !important; cursor:pointer !important;}
			  #lp-pom-image-94{position:fixed !important; top:301px !important; left:10px !important; cursor:pointer !important;}
			  #lp-pom-image-95{position:fixed !important; top:368px !important; left:10px !important; cursor:pointer !important;}
			</style>

That means I have imported 5 images. Now I have posted 5 bookmark too in the page and the codes for the bookmarks are as follows:

			<div id="home" style="height:1px; width:1px;"></div>
			<div id="documents" style="height:1px; width:1px;"></div>
			<div id="features" style="height:1px; width:1px;"></div>
			<div id="info" style="height:1px; width:1px;"></div>
			<div id="download" style="height:1px; width:1px;"></div>

 

  1. Now the final part, we need to write a javascript code for the scrolling animation. The javascript is basically tell the browser that while clicking any images or text having any specific id, it will go to a particular bookmark. We need to put the code in header section by selecting the placement head. The code is as follows:

    			<script>
				$(document).ready(function(){                                                     // this says excute the following code while everything in the page is loaded
					$("#lp-pom-image-91").click(function(event){								  // this says while clicking the "#lp-pom-image-91" image do the following function
						$('html, body').animate({ scrollTop: $("#home").offset().top }, 1000);	  // this say while clicking "#lp-pom-image-91" animate scroll to "#home" place
					});					
				});
			</script>

    Like in my template i corporate the javascript code as belows:

    			<script>
				$(document).ready(function(){
					$("#lp-pom-image-91").click(function(event){
						$('html, body').animate({ scrollTop: $("#home").offset().top }, 1000);
					});
				    $("#lp-pom-image-92").click(function(event){
						$('html, body').animate({ scrollTop: $("#documents").offset().top }, 1000);
					});
				    $("#lp-pom-image-93").click(function(event){
						$('html, body').animate({ scrollTop: $("#features").offset().top }, 1000);
					});
				    $("#lp-pom-image-94").click(function(event){
						$('html, body').animate({ scrollTop: $("#info").offset().top }, 1000);
					});
				    $("#lp-pom-image-95").click(function(event){
						$('html, body').animate({ scrollTop: $("#download").offset().top }, 1000);
					});
				    $("#lp-pom-text-20").click(function(event){
						$('html, body').animate({ scrollTop: $("#download").offset().top }, 1000);
					});
				});
			</script>
July 28, 2012 12:07 pm
User photo
Ryan Engley
Unbounce

Chester that's brilliant - thank you for sharing!

July 28, 2012 04:08 pm
User photo
Chris Hammersley

Ryan & Chester - thanks so much for this! It works so well and really makes the page seem that much classier!

Btw, you can use Chester's code to activate scrolling for buttons as well, just use the SCRIPT, but remove the STYLE!

September 13, 2012 12:39 pm
User photo
CONOR NEILL

Great work Ryan, have it up and working and was really easy to follow the video + copy the scripts ;-)

October 19, 2012 04:54 am
User photo
Ryan Engley
Unbounce

Thanks so much Conor and Chris - glad to hear that it helped

October 19, 2012 01:46 pm
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
Add a comment