Jquery is indeed the most compressed and efficient library of JavaScript introduced so far that has made a web developer's job more easy. Its built in functions of show(), hide(), AJAX() and my beloved scrollTop() are indeed the most used functions that gives a new life to user interface (UI). CSS3 animations using @Keyframes rule is one of the most innovative things I came across so far. Pseudo elements such as :before and :after are increasingly being used now because they eliminated the use of unnecessary div tags.
These days since I am on vocations I am trying to improve skills of both Jquery and CSS3. From the combination of beautiful web tricks that I learnt so far, I managed to design a simple scroll to top button that uses JQuery's scrollTop function to produce smooth scrolling and is spiced up with CSS3 effects to make it stand out. I have created just two sample versions with circular and rectangular shapes. The Styles are extremely easy to be customized. Lets first see a demo for the circular one:
Don't forget to check our previously released versions of back to top buttons:
How to add it to Blogger?
- Go To Blogger > Template
- Back up your template
- Click Edit HTML
- Search for <head>
- Just below it paste the following scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://downloads.mybloggertricks.com/scrolltop.js' type='text/javascript'/>
Note: I have included the dynamic link for jquery so you wont need to update it when a new version of Jquery is released. It will update automatically.
6. Now Search for ]]></b:skin>
7. Just above it paste one of the following styles
For circular one use this code:
/* ----- MBT's Back-To-Top Button Circular version -----*/
@-webkit-keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}
}
@-moz-keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}}
@keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}}
#back-top, #back-top:hover{
position: fixed;
display:block;
display:none;
bottom: 20px;
right:20px;
cursor:pointer;
width: 52px;
height:52px;
text-align: center;
text-decoration: none;
color: #797e82;
color: rgba(100,100,100,0.8);
font-size:16px;
border:1px solid #c5ccd3;
border-radius:30px;
z-index:9999;
padding-top:35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #dee1e7;
background: rgba(208,215,222,0.5);
}
#back-top:hover{
color:#000;
text-shadow:1px 1px 0 #fff;
background: #d0d7de;
background: rgba(208,215,222,0.9);
border-color:#8fa8c1;
}
#back-top:before{
display:block;
content:"";
position:absolute;
z-index:998;
background: #e2e3e6;
background: rgba(222,225,231,0.3);
width: 66px;
height:66px;
border-radius:35px;
border:1px solid #c5ccd3;
top:-9px;
left:-9px
}
#back-top:hover:before{
border-color:#8fa8c1
}
#back-top:after{
display:block;
content:"";
position:absolute;
z-index:10000;
background: url(http://3.bp.blogspot.com/-GgZTH0g3MQw/UNsqy--OCmI/AAAAAAAAIUg/riUFz9WLaaI/s400/sprite-mbt.png) -10px -5px no-repeat;
opacity:0.5;
width: 10px;
height:23px;
top:10px;
left:50%;
margin-left:-5px;
}#back-top, #back-top:after, #back-top:before{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
#back-top:hover:after{
opacity:1;-moz-animation-duration: .5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: arrow_to_top;
-moz-animation-timing-function: linear;-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: arrow_to_top;
-webkit-animation-timing-function: linear;animation-duration: .5s;
animation-iteration-count: infinite;
animation-name: arrow_to_top;
animation-timing-function: linear;
}
For Rectangular one use this code:
/* ----- MBT's Back-To-Top Button Rectangular version -----*/@-webkit-keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}
}
@-moz-keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}}
@keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}}
#back-top, #back-top:hover{
position: fixed;
display:block;
display:none;
bottom: 20px;
right:0px;
cursor:pointer;
width: 24px;
height:34px;
text-align: center;
text-decoration: none;
color: #797e82;
color: rgba(100,100,100,0.8);
font-size:16px;
border:1px solid #c5ccd3;
border-radius:2px;
z-index:9999;
padding-top:35px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin:0px;
background: #dee1e7;
background: rgba(208,215,222,0.5);
}
#back-top:hover{
color:#000;
text-shadow:1px 1px 0 #fff;
background: #d0d7de;
background: rgba(208,215,222,0.9);
border-color:#8fa8c1;
}
#back-top:before{
display:block;
content:"";
position:absolute;
z-index:998;
background: #e2e3e6;
background: rgba(222,225,231,0.3);
width: 37px;
height:50px;
border-radius:2px;
border:1px solid #c5ccd3;
top:-9px;
left:-9px
}
#back-top:hover:before{
border-color:#8fa8c1
}
#back-top:after{
display:block;
content:"";
position:absolute;
z-index:10000;
background: url(http://3.bp.blogspot.com/-GgZTH0g3MQw/UNsqy--OCmI/AAAAAAAAIUg/riUFz9WLaaI/s400/sprite-mbt.png) -10px -5px no-repeat;
opacity:0.5;
width: 10px;
height:23px;
top:7px;
left:50%;
margin-left:-5px;
}#back-top, #back-top:after, #back-top:before{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
#back-top:hover:after{
opacity:1;-moz-animation-duration: .5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: arrow_to_top;
-moz-animation-timing-function: linear;-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: arrow_to_top;
-webkit-animation-timing-function: linear;animation-duration: .5s;
animation-iteration-count: infinite;
animation-name: arrow_to_top;
animation-timing-function: linear;
}
8. Now just one last step. Paste the following HTML code just below <body>
<a href='#top' id='back-top' style='right:0px; display: inline;'/>
Tip: Play with border-radius property to design more creative shapes yourself!
9. Save your template and you are all done!
Visit your blog and scroll to bottom to see it working just fine!
How it works?
The script shows and hides the button based on the position of the window. As soon as the user scrolls down, the script will activate the button through .show() function and as soon as the user moves up, the button disappears due to activation of .Hide() function. The soft fading effect also depends on the inner width of the window (i.e 1600px and 812px) and button location. The effects are introduced using simple Jquery built-in functions of fadeIn() and fadeOut().
The button will display to the bottom right corner of the page.
The opacity in button's background colors is introduced using rgba colors. Where thanks to the alpha channel the opacity of the object is easily controlled without introducing a separate property for it. In order to avoid IE's opacity issues I have included a separate property for background color using rgb settings. So the button would look the same in all browsers. However since IE does not support Keyframes animation, therefore the arrow wont animate in IE alone.
Questions?
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query. If you carefully observe the stylesheet & the scrolltop.js script for this widget, you will be able to learn almost everything about CSS3 and JQuery's widely used functions. Wish you great health and peace buddies. Peace and blessings. :)
Don't forget to check this beautiful image effects using CSS:
Filed Under: CSS and HTMLTricks, Web Designing
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
33 comments:
Hello sir, I want your help regarding CSS, HTML and "how web Hosting works?"
Can you please provide me some data, articles or books??
I shall be very thankful.
My email : waqasazamkml@gmail.com
Regards
Thanks for the post Bro !
Students Crunch
Thanks for the cool widdget, I will use this on my site soon.
Free Mobile recharge
Very nice post mr. Muhammad. i like ur blog,
How To Make Animated Rainbow Color Link In Blog
thanks for this amazing tip.
Please tell me how to change the background color of the button.
WOw Awesome Buttons dude
Great work bro, you are just too good May ALLAH bless you long life to keep on going with the work.
Visit M.Y.B Softwares!
Very Help ful
Recommended Post Slide Out Widget V2
Thanks and Regards,
Hemant Verma
hey bro plzz help me maine
apne blog pe templets
download kiya bt edit nahi
ho hai mere hisab
se...
www.newblackhat.
blogspot.in
check bro and vo site jaha se
maine
templets download
kiya
www.bloggerhack.com/2011
/10/progray-blogger-
template.html?m=1
kya maine app ko apne blog
ka email and password aur
apne detail de do app sahi kar
doge...plzzzzzzzzzzz help app
ne pahle bhi mera help
kiya....uske liye thnxxxxxx
Nice widget. I will surely put it on my blog as soon as i get time.Thanks bro for this
Blogging Tips
please tell me how to move the lables,time and author below post title
CareerAndTricks
Very nice tutorial Bro. Just love your blog :)
Zeshan
From: ZAKeTeck
Nice post. this great work. thanks for sharing :)
Regards
Rahul Kashyap
Blog: SDMMovies.com
its very nice....by www.quizvook.com
Mohd bro, I want to contact you personally. Please tell me how can i do so. Coz you don't read emails frequently. :(
Thank you Sir for sharing this. I have seen the demo page and seen the top navigation menus which are also looking nice. Please provide me the code for that.
BLOGGER TIPS & TRICKS
USEFUL TRICKS
bro i have commented many times but i did not get solution of any problem
CareerAndTricks
Hey, whats the problem with your comment box... i want to explain my problem but when i type the body tag it says somewhat like "Tag not accepted: BODY..................
WHATZ THE PROBLEM
Thanks for this amazing post brother. But i am using wordpress :(. dont know much about it.
Shahbaz Khan recently posted How to Sneak into unprotected Security Cameras using Google Dorks
simply awesome.keep rocking.
regards
www.technosati.com
@Waqas
If you seriously wish to learn them all and comprehensively then read our articles on web hosting one by one ,download our Ebooks,learn web designing using books from sitepoint or just use w3schools.com
Hope this helps :)
@Sumit
To change background look in the selector properties shown by highlighted border-radius. You will find these properties:
background: #dee1e7;
background:rgba(208,215,222,0.5);
They will appear twice. So edit them accordingly. Use our color generator tool.
@MYB
May Allah bless you more dear brother :)
@Hemant Verma
Such comments will be considered spam from now onwards buddy. Kindly avoid them.
@ABHIJEET
If I could help each one of you I would love to do that but time kills buddy. Never share your password with anyone. Since that template is not our resource thats why you may kindly contact its designer for help. I help out with MBT templates only buddy.
@Rohit
Never loose hope buddy. Honestly 24 hours a day is just too less of a time these days. I really over loaded with many tasks so hardly publish juts a post on alternate days. Juts preparing an new year gift for all of you. :)
For that simply click expand widgets box and then search for
data:post.body
To move the labels and author info just below titles then paste its code just above data:post.body and if you wish to place it at the bottom of post then place it below data:post.body
In your template you will fine the code for Author info code just below:
<div class='post-footer-line post-footer-line-1'>
and the labels code just below:
<div class='post-footer-line post-footer-line-2'>
Let me know for more help pal :)
@abhishek
There you go dear: Create Colorful tabs Menu with jQuery :)
@lucky
Please first encode your html code using this tool
:)
@shahbaz
This widget can be added to any page online! Not limited to any platform dear. The head and body tags exsit in wordpress too. Just place them accordingly. :)
@Mohammad:
so please tell me, from where I should start?
Thankyou brother nice post.
Upload and earn more money in dollars!
awesome tutorial sir.
thanks for this.
i added all the scripts but still not showing up in my blog ? O.o .. thetrick11.blogspot.com
thanks man
شات عراقنا
دردشة عراقنا
جات عراقنا
شلة عراقنا
عراقنا
شات العراق
دردشة عراقية
شات كيكه
دردشة عبدالله
جات
دردشة
منتدى دردشة عراقنا
منتدى عراقنا
Animation using css3 key frames is described here. Know all about it
Web Designers Singapore
at the very last step i.e; step no. 8
i cudn't find "body" in my blogger template
so plz help me out !!!
http://www.tip-d-trick.blogspot.in/
Dear brother
scroll to top honestly worked fine for couple of days in my blogger, but now do not work smoothly even though some times disappeared!!. when i cheked DEMO in this blogg i find it also no more working. so i ask you devotional to fix this problem or tell me how can i fixed?
regards. with lot of best wishes
this good..for me...thanks...www.hapta.in
Simply wish to say your article is as surprising. The clarity for your post is just great. Thanks one million and please keep up the enjoyable work. dentist nj
Thanks maan http://www.khotikor.com
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad