基于Jquery返回顶部代码html+css+js

来源：互联网发布：手机淘宝菜鸟驿站不见编辑：程序博客网时间：2024/06/05 08:58

HTML代码

<div class="back-to-top"></div>

CSS代码

.back-to-top{    background: #3174b3;    width:50px;    height:50px;    line-height: 50px;    position: fixed;    right:15px;    bottom:15px;    cursor: pointer;    font-size:24px;    text-align: center;    color:#ddd;    -webkit-transition: 0.3s ease-out;    transition: 0.3s ease-out;}.back-to-top:hover{    background: #2d67a2;    color:#fff;    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .2);    box-shadow: 0 3px 9px rgba(0, 0, 0, .2);}

JS代码

$(document).ready(function(){    var $backToTop = $(".back-to-top");    /* 隐藏回顶部按钮 */    $backToTop.hide();    $(window).on('scroll', function() {        if ($(this).scrollTop() > 100) {            /* 返回顶部按钮将在用户向下滚动100像素后出现 */            $backToTop.fadeIn();        } else {            $backToTop.fadeOut();        }    });    $backToTop.on('click', function(e) {        $("html, body").animate({scrollTop: 0}, 500);        /*500毫秒内返回顶部*／    });})

注：其中Js代码是百度一下的，看了一下，实在不需要改，已经够精简了
演示地址：http://www.6dsoft.com，向下拉100px，效果见右下侧

0 0