返回顶部 模仿天猫的返回顶部代码 HTML JQuery CSS JavaScript
2017-04-01 11:51
686 查看
关于返回顶部这个功能,绝大部分网站都有用到,算是一个细节方面的小东西,个人觉得天猫的返回顶部这个小东西做的挺好,下面便是我模仿它的代码:
HTML:
CSS:
JS:
至于jQuery就不用介绍了,基本上大家都了解,希望帮助那些纠结于实现返回顶部的朋友们。
HTML:
</!DOCTYPE html> <html> <head> <title>返回顶部,模仿某猫</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body id="page"> <h1>返回顶部</h1> <h2>返回顶部</h2> <h3>返回顶部</h3> <h4>返回顶部</h4> <h5>返回顶部</h5> <h1>返回顶部</h1> <h2>返回顶部</h2> <h3>返回顶部</h3> <h4>返回顶部</h4> <h5>返回顶部</h5> <h1>返回顶部</h1> <h2>返回顶部</h2> <h3>返回顶部</h3> <h4>返回顶部</h4> <h5>返回顶部</h5> <h1>返回顶部</h1> <h2>返回顶部</h2> <h3>返回顶部</h3> <h4>返回顶部</h4> <h5>返回顶部</h5> <h1>返回顶部</h1> <h2>返回顶部</h2> <h3>返回顶部</h3> <h4>返回顶部</h4> <h5>返回顶部</h5> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS:
#gotoTop { box-sizing: border-box; display: none; position: fixed; bottom: 10%; right: 20px; cursor: pointer; padding: 9px 2px; width: 40px; height: 40px; text-align : center; border: 1px solid #e0e0e0; z-index: 99; background: #000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QkQzNTRERUVBNUUxMUUzODcyNzk2RTM5MkZCREQ2OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QkQzNTRERkVBNUUxMUUzODcyNzk2RTM5MkZCREQ2OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdCRDM1NERDRUE1RTExRTM4NzI3OTZFMzkyRkJERDY5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdCRDM1NERERUE1RTExRTM4NzI3OTZFMzkyRkJERDY5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+tblnnAAAAPBJREFUeNrs10EWgiAUBdDgtCP3vwTWRE2YlJXfo0F038iJHs/li49Ua73IcxIYMGDAgAEDBgwYMGDACBgwYMCAAQMGTDillHbZXiRF7l+W5ZT3yoMsUH1x3S15MJRhcHLnz6gGweaH+YDSHScPjNIVJw+O0g1nlL+SHvOmx+zK7D1muIABAwYMGDAT9pitjfbeO1KwAadI+23PNzEn5XrUgx5Xqk3EhhVMwfNRWmu+O89gJgYMmB/ZY76YeuTp3MT8wcSs/pVMjM0XjD0m2HBNzNSnazBgwFAAAwYMGDBgwIABAwaMgAEDBgyY7rkJMABdBLUSAt7mFQAAAABJRU5ErkJggg=="); background-size: 100% auto; text-align: center; } #gotoTop { _position: absolute; _top: expression(documentElement.scrollTop + documentElement.clientHeight * 3/ 4 + "px") } #gotoTop.hover { background: #165ec5 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEREMTlCMUU5MzExMUUzOUM1NEZEOUMyNkQ2RTcxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEREMTlCMkU5MzExMUUzOUM1NEZEOUMyNkQ2RTcxRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRGQzkyQjVDRTkzMTExRTM5QzU0RkQ5QzI2RDZFNzFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4REQxOUIwRTkzMTExRTM5QzU0RkQ5QzI2RDZFNzFGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jXerwwAAAiJJREFUeNrsmMtKw0AUhptaCra2qC24E1ddCAVdiCC4c+XW22OIID6EK1/DS9fiWhREQUERFyIquBHvtVaLtv6DJzDEqU0hbWrzH/hIk5lMky9zkpmxKpVKiPE7LIqhGIqhGIqhGIqhGIqhGIqhGAbFUAzFUAzFUAzFUAzFeBy9YFV+z4EHigmFOkAWHMr+MDgGX0EXsw8GQFr278AlGAmqmH6QlJ4ScZR9Ss95AddBE7MGZmrUWQezflxcxIf/VO+TQZBxUTcjL+NTee+0dY/ZAFN1npMD0+0uZhyM1XnOLtjmAI8DPIqhGIqhGIrxInZAXH6XQBF0gqgcU/sToACWwShIgLCjnTLIgz2wJG3mZJsw/G9emGxVMW4a6wbPMkcaqlH3SOZM6pxHN/fj1Y2EPe6BKZklKxbk2KJ2LCUTQxWv2hQh7SDrqFMW6WeGuopzlw/Ft7mSvsB0q23v/3goF+DNUVY0PDhL0tPUVsnL3tKIHqNH3LGtlnY9hrKeKqlpNTqFmiGmERFu1n1E/pGUgixXfBjKokEWY0lqvRvKbsBTUMXEwIn2xfIlZ1s1mjZM91NMWEsDU2qYrq9p1+tnKtnvihVt0GdH0lGnYZ9lP8TY45euGuXzLtqwe0pfO4hRw/fN0M8Kvym2ZBQbqzKJVKPhA21kq9q64rID12MohmIohmIohkExFEMxFEMxFEMxFEMxFEMxDIqhGIrxKL4FGABymv1Q2e/c3AAAAABJRU5ErkJggg=="); text-decoration: none; background-size: 100% auto; } .fay-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: topFadeIn 0.4s ease-in-out; animation: topFadeIn 0.4s ease-in-out; } .fay-tip p{ display:none; background-color: #494949; padding: 10px; width: 80px; position: absolute; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: 38px; color: #FFF; font-size: 13px; line-height: 1.4; top:0; margin: 0 0 10px; } .fay-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#494949; right:-12px; top:10px; border-color: transparent transparent transparent #494949; } .fay-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:0; left:80px; } @-webkit-keyframes topFadeIn { 0% { right:80px; opacity:0; transform: scale(0.6); } 100% { right:38px; opacity:100%; transform: scale(1); } } @keyframes topFadeIn { 0% { right:80px; opacity:0; } 100% { right:38px; opacity:100%; } }
JS:
gotoTop(); function gotoTop(min_height) { // 预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div id="gotoTop" class="fay-tip"><p>返回顶部</p></div>'; // 将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click(// 定义返回顶部点击向上滚动的动画 function() { $('html,body').animate({ scrollTop : 0 }, 700); }).hover(// 为返回顶部增加鼠标进入的反馈效果,用添加删除css类实现 function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); }); // 获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 0; // 为窗口的scroll事件绑定处理函数 $(window).scroll(function() { // 获取窗口的滚动条的垂直位置 var s = $(window).scrollTop(); // 当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐 if (s > min_height) { $("#gotoTop").fadeIn(100); } else { $("#gotoTop").fadeOut(200); } }); }
至于jQuery就不用介绍了,基本上大家都了解,希望帮助那些纠结于实现返回顶部的朋友们。
相关文章推荐
- 基于Jquery返回顶部代码html+css+js
- eclipse强大的代码【javascript|html|css|jquery|…】提示插件 —— aptana
- otepad++ 配置 支持jquery、html、css、javascript、php代码提示
- JavaScript/Jquery返回顶部代码
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- html+css+jquery实现右下角返回顶部功能
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- JavaScript/Jquery返回顶部代码
- js,javascript,jquery网页返回顶部代码
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- 在线运行Javascript,Jquery,HTML,CSS代码
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- eclipse aptana插件 —— 【javascript|html|css|jquery|…】自动提示
- jsbeautifier + JScript.NET/JavaScript 编程实现 JavaScript、HTML、CSS 代码格式化脚本命令行工具 并集成到 EditPlus
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- jsbeautifier + CScript/WScript/JavaScript 编程实现 JavaScript、HTML、CSS 代码格式化 js 脚本命令行工具 并集成到 EditPlus
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- eclipse aptana插件 —— 【javascript|html|css|jquery|…】自动提示