Skip to main content

Recent Post

Kathai Sollukiren Vanga Youtube Channel

Post a Comment

Smooth Scrolling "Back To Top" Button for Blogger/Blogspot



"Back To Top" Button

You surely have seen on many blogs and websites a  "Back To Top" Button in the sidebar at the bottom of the page that shows an image when clicked, it takes the user to top of your blog website. Animated back to top button in blogger website is one of the best Jquery style animated widget that looks 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 as the
back to top button.






Add Smooth Scrolling "Back To Top" Button Widget to Blogger Jquery




Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link


Step 2. From the pop-up window, scroll down and choose HTML/JavaScript.


Step 3. Select & Copy the code below and paste it into the new HTML/JavaScript:



<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>

<script type="text/javascript">

var scrolltotop={

//Modified by www.blogtipsuk.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>





Step 4. 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 URL" and add this link:




Collection of Back to Top buttons.







back to topback to topback to topback to topback to topback to topback to top
back to topback to topback to topback to topback to topback to topback to top
back to topback to topback to topback to topback to topback to topback to top




Step 5. Save the Widget and drag it near the footer or any bottom position.

Step 6. View your blogger website to see Smooth Scrolling "Back To Top" Button.

Labels:

Comments

Post a Comment

Popular posts from this blog

Best Blog Directory And RSS Submission Sites

The RSSTop55 is my personal selection of the best blog and RSS directories and search engines that you can find on the web. Over the years, I have spent so much time in updating and refining it that the original list has grown to feature almost 400 directories and search engines, which make up for a truly unique collection of venues that you can use to promote your website. Photo credit: juliengron Why this list is so valuable to you and what are its key advantages compared to other lists dealing with the same topic? The RSSTop55 is updated weekly. New directories are added and I check persistently whether some old directories have headed to the deadpool, changed topic of interest, become a spam site, etc., so that this collection remains always of high-value. All directories are briefly reviewed, so that you can have a quick glance at each one of them and evaluate immediately if a directory is a good promotional venue for your website or business, without spen...
Post a Comment
Read more

Make Money Online: Anyone And Everyone

If you’re a blogger or a internet marketer or even a beginner then you already know that it’s POSSIBLE to make money online. And what’s interesting about it is that, there are a lot of ways to make money online – from selling ads, e-books, affiliate marketing, freelance writing, podcasting, consulting, designing, coding, etc. So I’m going to highlight some of those online income streams but don’t expect overnight success because creating an income stream requires a lot of work and patience. But if you are a beginner and clueless about where to start then this should help you to focus on that. If you have any trouble with any of these options then leave a comment below or you can e-mail me and I’ll do my best to find the best resource to help you. Make Money Online With Your Website Do you have a website or a blog? If so, then then selling advertisements is the easiest way to make money online. Since there are tons of ad networks on the Internet you have to m...
Post a Comment
Read more

How To Submit Blogger Sitemap To Google Webmaster Tools

Hi all of my friends, (prem). Today I am telling you how to submit a sitemap to Google Webmaster tools. Before going to today's tutorial, some discussion about Google webmaster. Why you submit a sitemap? This is the question? I will tell you guys how this is effect on your tariff. Bloggers say, “If you are not on Google, you are almost invisible to the world”, yes this is rightly said because if your blog is not submitted to Google Webmaster tools, there is high tendency that all you blog post might not get indexed on Google search engine and this might make you become invisible to the world despite your hard work. My blog almost had 25% increase of traffic from Google after submitting my blog to Google Webmasters Tool, Indexed my new post quickly and improve crawl rate.
Post a Comment
Read more