How to Add Smooth Scroll to Top button with J query plugin, I already given a Scroll to Top widget with J query and CSS. here showing you another type of Smooth scroll to Top Widget with J query.
WHAT IS DIFFERENCE BETWEEN PREVIOUS AND PRESENT PLUGINS?
In previous Plugin, the Scrolling Starts from bottom with a Certain speed and Maintains Same speed till to reach top of web page
But in this plugin the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed. this effect is looks more attractive.
Scroll this page to Bottom and See Demo at bottom right
HOW TO ADD SMOOTH SCROLL TO TOP WITH J QUERY ?
there are 2 Simple Steps
Step 1: Adding J query JavaScript Plugin
Step 1: Adding J query JavaScript Plugin
- Go to Blogger Dashboard < Design tab > Edit Html
- Search for
</head>
tag - Add below line of code Before
</head>
tag<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
Step 2: Adding Scroll to Top Script
- Go to Blogger Dashboard < Design tab > Edit Html
- Search for
</head>
tag - Add below section of code Before
</head>
tag and Save your Template.<style type="text/css"> #w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;} #w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);} #w2btoTop:active, #w2btoTop:focus {outline:none;} </style> <script src="http://widgets.way2blogging.org/blogger-widgets/w2b-jquery.ui.totop.js" type="text/javascript"></script> <script type="text/javascript"> /*<![CDATA[*/ ;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery); /*]]>*/ </script>
You Are Successfully Done!
Thanks for sharing Add Smooth Scroll Effects to Blog
ReplyDelete