Jiangyue Zhu

Impossible is Nothing

Customize jQuery Plugin–Back to Top widget

Leave a comment

How to make a more friendly widget which can enhance the user experience on the website? Imagine this scenario: when you browse a web page with long height and you almost reach the bottom of this page, how would you feel if you have to go back to the top right now? Is it too much boring to use the scroll bar which may make your finger exhausted? You may need a small widget which can make this even happen just by one click. Actually, when I browsed some websites, I noticed that some of them implemented this kind of features which I think are very user-friendly. In this blog, I want to tell how I implemented this  by using defining a customized jquery plugin.

For someone who may not be familiar with jquery plugin, please take this as reference.

Firstly, I need to write some codes for this widget using div with an id “backToTop” assigned. And I would use a small icon –up arrow for this widget. 

The code samples for this part is pretty simple:

<div id="backToTop">
   <img src="img/up.png" alt="up" width="60" height="80" />
 </div>

Now, the task would be switched to the style sheet. What I want is to move this widget to the right-bottom corner and always be there during scrolling through the page. In this way, it will not affect users’ reading behaviors. So the style sheet for this part looks like this:

div#backToTop{
	position:fixed;
	right:0em;
	bottom:0em;
	cursor:pointer;
	display:none;
	}

Some additional parts should be noted. As we prefer not to see this widget at the first time (cause we only need it when we leave the top position), we set the display attribute to none. Also, we set cursor to pointer in order to tell users they can click on it.

Then, it comes to the core part, the jquery plugin. Firstly, let’s create a new js file, naming it ‘plugin.js’. Inside it, let’s add these codes:

// JavaScript Document
(function($){

 $.fn.backToTop=function(options){
 var settings = $.extend({
 "position":200
 },options);

 var this_= this;
 var position = settings["position"];

 $(document).scroll(function(){

 var currentPos=$(window).scrollTop();

 if(currentPos >= position){
 this_.show();
 }
 else {
 this_.hide();
 }

 });

 this_.click(function(){

 $(window).scrollTop(0);

 });

 };

 })(jQuery);

Simply put, what I am doing is to define a function called ‘backToTop’ with an optional parameter called position. This position attribute is used to define when the widget should appear. I set the default value to 200. Besides, I added a scroll event to the document object and retrieve the current top offset. Using a if-else statement to control the visibility of the widget, the widget would not show up until the current top offset goes beyond the position we set. Then, don’t forget to set a click event on this widget, in the event, define a function to let set the window object scroll to the top by using scrollTop(0). And if we scroll back to top in which the current offset is smaller than the position that we set, the widget would disappear.

After we accomplished this javascript file, we need to call this function in our page. Generally, we use $(“#backToTop”).backToTop([optional parameters]) to invoke the function.

$("#backToTop").backToTop();

Now, we are set! Please visit my live project.

Advertisements

Author: zhujy8833

Impossible is nothing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s