diff --git a/docs/templates/sidenav.jade b/docs/templates/sidenav.jade
index 66fc2e20..828ef078 100644
--- a/docs/templates/sidenav.jade
+++ b/docs/templates/sidenav.jade
@@ -36,6 +36,7 @@ ul.sui-nav.nav-stacked.docs-sidenav.docs-nav
   - items[3].children.push({name: 'tab', title:'标签页 - 样式', url:'tab.html'})
   - items[3].children.push({name: 'tab-js', title:'标签页 - JS', url:'tab-js.html'})
   - items[3].children.push({name: 'intro', title:'新手指引', url:'intro.html'})
+  - items[3].children.push({name: 'Sider', title:'Sider', url:'sider.html'})
 
   - items[4].children.push({name: 'dialog', title:'对话框', url:'dialog.html'})
   - items[4].children.push({name: 'tooltip', title:'tooltip', url:'tooltip.html'})
diff --git a/docs/templates/sider.jade b/docs/templates/sider.jade
new file mode 100644
index 00000000..d57437b5
--- /dev/null
+++ b/docs/templates/sider.jade
@@ -0,0 +1,43 @@
+extends base
+
+block title
+  title Sider
+
+block sidebar
+  +sidebar('Sider')
+
+block content
+
+  h2.sui-page-header 开发者文档
+
+  ul.sui-nav.nav-tabs.nav-large
+    li.active
+      a(href='#demo1', data-toggle='tab') 示例
+    li
+      a(href='#code1', data-toggle='tab') 代码
+    li
+      a(href='#doc1', data-toggle='tab') 文档
+
+  div.tab-content
+    div.tab-pane.active#demo1
+        style.
+          #sider1 {
+             /*仅在demo中使用*/
+            position: relative;
+            left: 0;
+            bottom: 0;
+          }
+        div.bs-docs-example
+            div.sui-sider#sider1
+                a.btn.f-icon.sui-icon.icon-touch-chevron-left(name="sider-back" title="返回上一页")
+                a.btn.sui-icon.icon-touch-arrow-up-left(name="sider-scrolltop" title="回到顶部")
+                a.btn.sui-icon.icon-touch-refresh(name="sider-refresh" title="刷新")
+
+    div.tab-pane#code1
+      pre.prettyprint.linenums(data-target='#demo1>div')
+    div.tab-pane#doc1
+      p 三个功能分别为返回上一页，回到顶部，刷新
+  ul.demo-operations.clearfix
+    li
+      a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
+
diff --git a/js/sider.js b/js/sider.js
new file mode 100644
index 00000000..619a1507
--- /dev/null
+++ b/js/sider.js
@@ -0,0 +1,58 @@
+!function ($) {
+
+  "use strict";
+
+
+ /* TAB CLASS DEFINITION
+  * ==================== */
+
+
+
+ /* TAB PLUGIN DEFINITION
+  * ===================== */
+
+  var old = $.fn.sider
+
+  $.sider = function(){
+    return new Sider;
+  }
+  var Sider = function(){
+
+  }
+  Sider.prototype = {
+    router :function(name){
+      if (name ==="sider-back") {
+      return this.defaults.back();
+      }
+      if (name ==="sider-scrolltop") {
+        return this.defaults.scroll();
+      }
+      if (name ==="sider-refresh") {
+        return this.defaults.refresh();
+      }
+    }
+  }
+  Sider.prototype.defaults = {
+    back: function () {
+      history.go(-1);
+    }
+    , scroll: function(){
+      $('html, body').animate({scrollTop:0}, 'fast');
+    } 
+    , refresh: function(){
+      location.reload() ;
+    }
+  }
+
+  $.sider.noConflict = function () {
+    $.sider = old
+    return this
+  }
+
+  
+  $(document).on("click",".sui-sider .btn", function (e) {
+    e.preventDefault()
+    $.sider().router($(e.target).attr('name'))
+  })
+
+}(window.jQuery);
diff --git a/js/sui.js b/js/sui.js
index c700b2b5..e433f407 100644
--- a/js/sui.js
+++ b/js/sui.js
@@ -21,3 +21,4 @@ require('./checkbox')
 require('./autocomplete')
 require('./navtest')
 require('./intro')
+require('./sider')
\ No newline at end of file
diff --git a/less/components.less b/less/components.less
index 38b6b91f..db766309 100644
--- a/less/components.less
+++ b/less/components.less
@@ -64,3 +64,6 @@
 
 // responsive
 @import "responsive.less";
+
+//sider
+@import "sider.less";
diff --git a/less/sider.less b/less/sider.less
new file mode 100644
index 00000000..cd5cc5e5
--- /dev/null
+++ b/less/sider.less
@@ -0,0 +1,33 @@
+@import 'variables.less';
+@import 'mixins.less';
+
+.sui-sider{
+	position: fixed;
+	right: 2em;
+	bottom: 2em;
+	z-index: 900;
+	.btn {
+		display: block;
+		width: 38px;
+		height: 38px;
+		background-color: @black;
+		color: @white;
+		text-align: center;
+		line-height: 38px;
+		font-size: 18px;
+		cursor: pointer;
+		text-decoration: none;
+		.opacity(20);
+    .singleTransition(opacity, .3s);
+    .border-radius(@borderRadiusMini);
+    +.btn {
+      margin-top: 4px;
+    }
+    &:hover {
+      .opacity(30);
+    }
+    &:active {
+      .opacity(50);
+    }
+  }
+}