Back To Top / Scroll To Top Buttons For Blogger
How to add smooth scrolling back to top button for website & blogger. Animated back to top button in blogger/website is one of the best Jquery style animated widget that looking good and also visitors enjoy easy site navigation scroll to top.
The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up, and also one more feature of this script you can add your own image that you like.
Scroll this page to Bottom and See Demo at bottom right
How to add smooth scrolling back to top button for website & blogger. Animated back to top button in blogger/website is one of the best Jquery style animated widget that looking good and also visitors enjoy easy site navigation scroll to top. The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up, and also one more feature of this script you can add your own image that you like. Scroll this page to Bottom and See Demo at bottom right |
How to Add Smooth Scroll to Top with Jquery ?
1. Go To Blogger > Layout
2. Add a Gadget Choose HTML/JavaScript widget
Paste the following code inside it
JQuery Code. if you can already add jquery plugin into your website or blog then skip first code. and if you not add already then add this code with scroll to top script.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
Scroll to Top Code.
<script type="text/javascript">
var scrolltotop={
//Modified by bloggerknown.blogspot.com more JQuery Scroll to Top Design
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="IMAGE LINK" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Replace IMAGE LINK with the image link of your back to top button.we have collect some of back to top button you can also get here. If you want to add image link then right click the buttons below and select "Copy image location" and add this link.
3. Save the widget and drag it near the footer or any bottom position.
4. View your blog to see the magic.
I hope this little trick work on all, if any problem then post comments for help others. share with frineds :D
Scrolling/Sliding Back to top Button widget will make your website more user friendly as it will directly take your user's to the top of the page smoothly.They don't need to scroll by them self with the help of mouse and sliding bar on right side.All they have to do is to click on a button and they will reach the top of the page it will not only safe the time of the user's but also make them comfortable and the compatibility of the website will be increased.Most of user would love this widget as they scroll back to top with lot of fun.so without wasting any much of time let us start working.adding it is as simple as writing A B C.
Adding A Sliding/Scrolling Back To Top Button Widget in Blogger.com1.Go to Blogger.com >>Your Blog>>Layout>>Add A Gadget>>HTML/JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="Your Image Link" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
} }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) }}scrolltotop.init()</script>
Customization of the widget (Important) According to your Satisfaction:Now you have to chose the image that you want to show as back to top,here are few images listed below just chose any one of the and replace it with Your Image Link Important:you only need to copy the url so don't copy the image just url and replace it with Your Image Link
And after changing the your image link with the above listed urls just hit save buttonand your work is done.
After a long time, I'm come with a nice widget for blogger. Maybe you've already got an idea what my today's post is about. From the post title and the image, it is clear enough to guess that you're getting a Scroll to Top script for your blogger blog. I'm gonna share some buttons too. But you can easily replace the default button with your custom image.
- Make sure you're signed in to your blogger account.
- Now go to your blogger Dashboard or Control Panel or whatever you call it.
- Go to the Layout, and hit on the Add a Gadget button from anywhere.
- Choose HTML/ JavaScript gadget.
- Copy the following code and paste it in the Content box.
- Now Save the gadget and View your site!
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a href="http://munnamark.blogspot.com">
</a><a id='noop-top' style='display: none; position: fixed;
bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png'/>
There are many codes available throughout the web to add Back to Top button. Almost all of these will ask you manually edit your HTML. But this one very simple just like adding a gadget nothing else.
Using Custom Image:At the beginning of this post, I mentioned, you can use your custom image with this script. Look at the blue part of the code. This is actually the link of the button where it is uploaded. If you have any button of your own, then simply replace the blue part of the code with your button image URL (You must need to upload the button image to the server) . That's all.
Tips:
There are six buttons I've prepared for you. If you wanna use any of them, simply click make a right click on any of them. Copy the image URL. I'm showing you the sample of second one below:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uZGYBOCFwYulg-c-7Azl75NTlyhAEo8HulYh9zRgLLoeL-VO2xrB58Zm_6ud4diBmyDzbRVlYw0CrHrtf12g1ab1vsJhmO-r1EXZWqiOe0ADoyLQemHesPioaqZ9zXJwBMPq3izSgJbP/s1600/Top+2.png
Thus you can find the link of other buttons. Just click right button your mouse over the button you like, then copy the image URL. To make sure whether this is the right URL, paste it in a new tab of your browser to check whether the image is alright.
Remember, sometimes an image may got two links or URLs. One is Image URL and the other is Link URL. You should copy the image URL, not the Link URL. It also depends on your browser sometimes. For exaple, Internet Explorer will only let you copy the link URL. It shows - Copy shortcut.
Caution:
While replacing the default button with your own you should be careful enough:
- Upload the image to a server which is fast and responsive
- Never try to shorten the URL
- Try to use the PNG format
- Keep the image size as minimum as possible (But not at the cost of quality)
- Don't try to replace any other part of the code if you don't have sufficient coding knowledge
I have already share with you guys tutorial on Adding Back To Top Button On Your Blog and also shared 16 Awesome Back To Top Buttons. In this tutorial i will share with you guys awesome jQuery smooth scrolling back to top button. This simple widget will enable your users to easily go back to top of your page with ease of a click. So lets add this simple and useful plugin to your blog together.
1. Go To Blogger > Layout 2. Add a Gadget Choose HTML/JavaScript widget Paste the following code inside it JQuery Code. if you can already add jquery plugin into your website or blog then skip first code. and if you not add already then add this code with scroll to top script. <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>Scroll to Top Code. <script type="text/javascript"> Replace IMAGE LINK with the image link of your back to top button.we have collect some of back to top button you can also get here. If you want to add image link then right click the buttons below and select "Copy image location" and add this link. 3. Save the widget and drag it near the footer or any bottom position. 4. View your blog to see the magic. I hope this little trick work on all, if any problem then post comments for help others. share with frineds :D Scrolling/Sliding Back to top Button widget will make your website more user friendly as it will directly take your user's to the top of the page smoothly.They don't need to scroll by them self with the help of mouse and sliding bar on right side.All they have to do is to click on a button and they will reach the top of the page it will not only safe the time of the user's but also make them comfortable and the compatibility of the website will be increased.Most of user would love this widget as they scroll back to top with lot of fun.so without wasting any much of time let us start working.adding it is as simple as writing A B C. Adding A Sliding/Scrolling Back To Top Button Widget in Blogger.com 1.Go to Blogger.com >>Your Blog>>Layout>>Add A Gadget>>HTML/JavaScript
Customization of the widget (Important) According to your Satisfaction: Now you have to chose the image that you want to show as back to top,here are few images listed below just chose any one of the and replace it with Your Image Link Important:you only need to copy the url so don't copy the image just url and replace it with Your Image Link And after changing the your image link with the above listed urls just hit save buttonand your work is done. After a long time, I'm come with a nice widget for blogger. Maybe you've already got an idea what my today's post is about. From the post title and the image, it is clear enough to guess that you're getting a Scroll to Top script for your blogger blog. I'm gonna share some buttons too. But you can easily replace the default button with your custom image. This is the default button of the script I'm sharing here. You can view the demo at the bottom right corner of the page. Just scroll down and see the button. Then hit on this to back to the top. But if you don't like it, or if you wanna use your own button, then you can replace this one. Now follow the procedure below (as simple as adding a JavaScript):
There are many codes available throughout the web to add Back to Top button. Almost all of these will ask you manually edit your HTML. But this one very simple just like adding a gadget nothing else. Using Custom Image: At the beginning of this post, I mentioned, you can use your custom image with this script. Look at the blue part of the code. This is actually the link of the button where it is uploaded. If you have any button of your own, then simply replace the blue part of the code with your button image URL (You must need to upload the button image to the server) . That's all. Tips: There are six buttons I've prepared for you. If you wanna use any of them, simply click make a right click on any of them. Copy the image URL. I'm showing you the sample of second one below: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uZGYBOCFwYulg-c-7Azl75NTlyhAEo8HulYh9zRgLLoeL-VO2xrB58Zm_6ud4diBmyDzbRVlYw0CrHrtf12g1ab1vsJhmO-r1EXZWqiOe0ADoyLQemHesPioaqZ9zXJwBMPq3izSgJbP/s1600/Top+2.png Thus you can find the link of other buttons. Just click right button your mouse over the button you like, then copy the image URL. To make sure whether this is the right URL, paste it in a new tab of your browser to check whether the image is alright. Remember, sometimes an image may got two links or URLs. One is Image URL and the other is Link URL. You should copy the image URL, not the Link URL. It also depends on your browser sometimes. For exaple, Internet Explorer will only let you copy the link URL. It shows - Copy shortcut. Caution: While replacing the default button with your own you should be careful enough:
I have already share with you guys tutorial on Adding Back To Top Button On Your Blog and also shared 16 Awesome Back To Top Buttons. In this tutorial i will share with you guys awesome jQuery smooth scrolling back to top button. This simple widget will enable your users to easily go back to top of your page with ease of a click. So lets add this simple and useful plugin to your blog together. |
![back-to-top-small-1[4].png (30×34)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDe-66XbLerUzanb6m_XKWTriAqoBaNkTg02DgI7261qmwPAaAQRoN1RkU1V2HC9g2fsCFf9pkaiyWfn_kyPOpbA92VQhZ1NLZDKGyQHhQtk8Yn7zwKvfxxeK0glJolxkLnGefWyPFslM/?imgmax=800)
Adding jQuery Code (Optional)
1. If you have not already placed jQuery in your template then follow this steps or jump directly to next section of this tutorial.2. Go to Template > Edit Html3. Then Search for <head> by pressing CTRL + F4. Paste below code just after the <head> Tag<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
1. If you have not already placed jQuery in your template then follow this steps or jump directly to next section of this tutorial. 2. Go to Template > Edit Html 3. Then Search for <head> by pressing CTRL + F 4. Paste below code just after the <head> Tag <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
How To Add jQuery Back To Top Button
1. Go to Blogger > Layout2. Now click on Add Gadget and select Html/Javascript 3. Then Paste below code into it.
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="IMAGE URL" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
4. Now replace IMAGE URL with any image from below list or any of your choice.
Back to top buttons is one of the best way of navigating your blog or website from footer to top, so this cool and smoothly back to top button tool can keep your visitors to stay for a long period of time, this back to top button will appear on the right side bottom beside the scroll down of the browser.
Adding this cool back to top button into your blogger blog is very simple all you need is to follow this step by step guide to implement it into your blog or website.
1. Go to Blogger > Layout 2. Now click on Add Gadget and select Html/Javascript 3. Then Paste below code into it. <style> 4. Now replace IMAGE URL with any image from below list or any of your choice. Back to top buttons is one of the best way of navigating your blog or website from footer to top, so this cool and smoothly back to top button tool can keep your visitors to stay for a long period of time, this back to top button will appear on the right side bottom beside the scroll down of the browser.  Adding this cool back to top button into your blogger blog is very simple all you need is to follow this step by step guide to implement it into your blog or website. |
How to add this cool back to top button on my blog or website
1. Go to Blogger Dashboard.
2. Go to layout.
3. Go add HTML/JavaScript / Add third-party functionality or other code to your blog.
4. Copy and paste the code.
5. Save and view blog
DEMO I have implemented the same button on this blog as well. For a demo, you can take a look at the bottom right of this page!
GET THE CODE HERE
Note You can customize this tool by changing the image URL of your desired image to use in you website.
place the link on the text with green background.
Any Question ?
Feel free to ask just Leave a comment
The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.
Demo
You can see a live demo on my blog, the buttons are located on the right side.
How to put Go Up and Go Down buttons using the jQuery slide effect
Step 1. Go to Template, click on the Edit HTML button
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3. Copy and paste the following piece of code inside the search box in order to find it:
]]></b:skin>
Step 4. Just above ]]></b:skin> paste this one:
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjd7-Dj5kF0jmvSf7r6urTKRRA5l1HzkocueNewx-jy9n55vMvOtu1Oh_86v1oBn_v4CTjREoLnrGTihTVgRUemZha3h1LLi0C2iH1Ul1wnSZ862EtyF8NnuWtNmtFPnfm62RxcQdmc4Y/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwzaSTqKKtj0c1Whcgn8OIQE5Mnw-7Laf-O7IO1agA3IcKCmegMyzhdh3_BEifZKPo1N0n4r9sBf0kFP5OYb4T12uL7fsbrigfCN1C81H7Ak_8EfKXKdg13f-JTndTvDjxyglMfQtH5s/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Note: - in green are some annotations that explains what styles you can modify on their left side.
- You can change the arrows by changing the URLs in blue.
- To change the buttons background color of buttons, change the white text with your color
Step 5. Now search (CTRL + F) for the following tag:
</body>
Step 6. And just above it, paste the code below:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.
Step 7. Finally, Save your changes by clicking on the Save template button. Enjoy!
1. Go to Blogger Dashboard. 2. Go to layout. 3. Go add HTML/JavaScript / Add third-party functionality or other code to your blog. 4. Copy and paste the code. 5. Save and view blog DEMO I have implemented the same button on this blog as well. For a demo, you can take a look at the bottom right of this page! GET THE CODE HERE Note You can customize this tool by changing the image URL of your desired image to use in you website. place the link on the text with green background. Any Question ? Feel free to ask just Leave a comment The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog. Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons using the jQuery slide effect Step 1. Go to Template, click on the Edit HTML button  Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box Step 3. Copy and paste the following piece of code inside the search box in order to find it: ]]></b:skin>Step 4. Just above ]]></b:skin> paste this one: /* Up and Down Buttons with jQueryNote: - in green are some annotations that explains what styles you can modify on their left side. - You can change the arrows by changing the URLs in blue. - To change the buttons background color of buttons, change the white text with your color Step 5. Now search (CTRL + F) for the following tag: </body>Step 6. And just above it, paste the code below: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. Step 7. Finally, Save your changes by clicking on the Save template button. Enjoy! |
0 Reviews:
Post a Comment
If you have any doubts, Let me know, Please!