January 9, 2014

Weebly Tricks #3 - Adding “scroll to top” with Fade Effect

Posted by Domz at 1/09/2014

Add scroll to top in Weebly


I came up with this article by combining a tutorial from weeblyforums.com and mybloggertricks.com. Well, both share the same script which originated from dynamicdrive.com but was edited with fade effect by mybloggertricks.com.
So this tutorial will help you insert a “scroll to top” button when a reader went down to read more of your page. This is simply helpful for articles with long contents.








1. To start with, download the js file by going to http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm just right clicking on it and choose "save link as". On same link download the image too!

2.  Now open the scrolltopcontrol.js using NOTEPAD and look for the line:

<img src="up.png" style="width:48px; height:48px" />

3. Now, instead of just "up.png", complete it like "http://theweeblytricks.weebly.com/files/theme/up.png", wherein the bold text will be your site address. Save and close your text editorial.

4. Now go to Weebly > Design > Edit HTML/CSS

5. On the left site click on the “add new files”, upload the scrolltopcontrol.js which you edited and also the up.png then save.

6. Last step is to apply it to the site or specific areas. Paste the following code in the <head>. (Read about <head> here)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://theweeblytricks.weebly.com/files/theme/scrolltopcontrol.js">

L code library (www.dynamicdrive.com)
* This not

/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHT
Mice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code


***********************************************


</script>

Change the bold text with your site address. You are done. I did it myself and I found no problem. Ask for any questions. Thanks.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top