效果圖 toolbar.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toolbar</title> <link rel="stylesheet" href="../css/base.css"> ...
效果圖
toolbar.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toolbar</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/toolbar.css"> </head> <body> 頂部 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">會員</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">購物車</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">我的關註</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">我的消息</span> </a> <!-- href屬性設置為#，可以點擊直接回到頂部 --> <a href="#" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">頂部</span> </a> </div> </body> </html>
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
toolbar.css
html,body{ height:2000px; background-color:pink; } .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } /*icon*/ @font-face { font-family: "iconfont"; src: url('../test/font/iconfont.eot?t=1477124206'); /* IE9*/ src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */ url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg'); /* iOS 4.1- */ } .icon { font-family: "iconfont" !important; font-size: 14px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } /*toolbar*/ .toolbar{ position: fixed; right:0; top:50%; margin-top:-102px; z-index:2; } .toolbar-item{ display: block; width:40px; height:40px; line-height:40px; text-align:center; color:#fff; border-bottom:1px solid #fff; position: relative; } .toolbar-icon{ display: block; background-color:#b7bbbf; font-size:20px; position: relative; z-index:2; } .toolbar-text{ width:62px; height:40px; position: absolute; top:0; left:0; } .toolbar-item:hover .toolbar-icon{ background-color:#71777d; } .toolbar-item:hover .toolbar-text{ background-color:#71777d; left:-62px; }
這種方式不需要用到js，給a鏈接添加href="#" 即可
不過這樣點擊之後在網址欄上會出現#，如果不希望出現的話，也可以用js來實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toolbar</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/toolbar.css"> </head> <body> 頂部 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">會員</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">購物車</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">我的關註</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">我的消息</span> </a> <a href="javascript:;" class="toolbar-item" id="backToTop"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">頂部</span> </a> </div> <script src="../js/jquery.js"></script> <script src="../js/toolbar.js"></script> </body> </html>
css跟上面的一樣
toolbar.js
// 不要暴露在全局，使用匿名函數自執行 (function($){ "use strict"; //回到頂部 $("#backToTop").on("click",function(){ $("html,body").animate({ scrollTop:0 }) }) })(jQuery);
