话不多说,请看实例
1、html 结构
- <div class="return_top">
- </div>
2、CSS 样式
- .return_top{
- width: 50px;
- height: 50px;
- background: url(../images/lanren.gif) no-repeat center #FF8D16;
- position:fixed;
- right: 30px;
- bottom: 30px;
- display: none;
- cursor: pointer;
- z-index: 99;
- }
3、js 效果
- <script>
- $(function() {
- $(window).scroll(function() {
- var topDistance = $(window).scrollTop(); //获取鼠标在本窗口现有状态下移动的高度
- if (topDistance > 100) { //如果移动高度大于100px,顶部图标单单显示出,如果移动高度小于等于100,顶部图标不显示
- $('.return_top').fadeIn(800);
- } else {
- $('.return_top').fadeOut(800);
- }
- });
- $('.return_top').on('click',
- function() {
- $('html,body').animate({
- scrollTop: 0
- },
- 800); //必须用$('html,body')选择,不然没效果
- })
- });
- </script>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: