返回常见返回顶部效......登陆

常见返回顶部效果

不羁2018-11-27 08:43:11216
<!DOCTYPE html>
<html>
    <head>
        <title>页面中常见返回顶部效果(TOP)</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />
        <!-- <link rel="stylesheet" href="static/css/style.css" type="text/css"> -->
        <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
        <script src="static/js/jquery.js"></script>  
        <style type="text/css">
            *{margin: 0px;padding: 0px;}
            body{text-align: center;}
            div{width: 1200px;height: 1500px;background: #eee;margin: 30px auto;}
            a{text-decoration: none;color: #fff;}
            p#back{text-align: center;position: fixed;bottom: 100px;right: 60px;background: #ccc;border-radius: 3px;height: 50px;width: 80px;display: none;}
        </style>
        <script>
        	$(function() {
        		$(window).scroll(function(){
        			if($(window).scrollTop()>150){
        				$('#back').fadeIn(1000)
        			}else{
        				$('#back').fadeOut(1000)
        			}
        		})
        	})
       </script>
    </head>
    <body>
    	<a href=""></a>
    	<div>网页内容</div>
    	<p id="back"><a href=""><span class="fa fa-arrow-circle-up"></span><br> 返回顶部</a></p>
   
    </body>
</html>

```javascript

$(function() {
        $(window).scroll(function(){
             if($(window).scrollTop()>150){
                      $('#back').fadeIn(1000)
                 }else{
                     $('#back').fadeOut(1000)
                         }
                 })
        })

```

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送