zoukankan html css js c++ java

返回顶部按钮功能的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toTop</title>
<style type="text/css">
*{
    margin:0;
    padding: 0;
}
html{
    height: 100%;
}
.toTopBtn{
    position: fixed;
    bottom: 100px;
    right: 100px;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    display: none;
}
</style>
</head>
<body>
    <p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p>
<script type="text/javascript" src="http://vscss.com/dm/jquery.js"></script>
<script type="text/javascript">
$(function(){
    var toTop = $("<span class='toTopBtn'>返回顶部</span>");
    $('body').append(toTop);
    $(window).scroll(function(event) {
        if($(window).scrollTop()>100){
            $('.toTopBtn').fadeIn();
        }else{
            $('.toTopBtn').fadeOut();
        }
    });
    $('.toTopBtn').click(function(){
        $('html,body').animate({
            scrollTop:0
        },200);
        //return false;
    });
});
</script>
</body>
</html>

查看全文

相关阅读:
web三大组件的注册
 springboot 支持 jsp
redis 储存session
springboot 做切面
 springboot web静态资源访问
 springboot加载外部配置文件
 springboot 两种配置文件，application.properties ，application.yml ,注入值的两种方式，主动@ConfigurationProperties与被动@value，和其他注解Conditional,PropertySource
今日立春，SpringBoot！简单springboot项目搭建开始。
linux防火墙开放端口
 Don’t try to create file system on an “extended” partition

原文地址：https://www.cnblogs.com/vscss/p/5924363.html