用jQuery实现在浏览器页面内容中的【返回顶部】（11.16.59天）

 

　　单纯使用html标签即可实现页面内容返回顶部的需求，但是这次使用jQuery实现，方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 30px;
        }
        .but {
            /*float: right;*/
            position: fixed;
            right: 25px;
            bottom: 25px;
            /*margin-bottom: 25px;*/
            /*margin-right: 25px;*/
            height: 40px;
            background-color: darkred;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<!--//生成100行带class的div标签-->
<!--div[class="ty"]{$$$}*100>-->

<div class="111">001</div>
<div class="111">002</div>
<div class="111">003</div>
<div class="111">004</div>
<div class="111">005</div>
<div class="111">006</div>
<div class="111">007</div>
<div class="111">008</div>
<div class="111">009</div>
<div class="111">010</div>
<div class="111">011</div>
<div class="111">012</div>
<div class="111">013</div>
<div class="111">014</div>
<div class="111">015</div>
<div class="111">016</div>
<div class="111">017</div>
<div class="111">018</div>
<div class="111">019</div>
<div class="111">020</div>
<div class="111">021</div>
<div class="111">022</div>
<div class="111">023</div>
<div class="111">024</div>
<div class="111">025</div>
<div class="111">026</div>
<div class="111">027</div>
<div class="111">028</div>
<div class="111">029</div>
<div class="111">030</div>
<div class="111">031</div>
<div class="111">032</div>
<div class="111">033</div>
<div class="111">034</div>
<div class="111">035</div>
<div class="111">036</div>
<div class="111">037</div>
<div class="111">038</div>
<div class="111">039</div>
<div class="111">040</div>
<div class="111">041</div>
<div class="111">042</div>
<div class="111">043</div>
<div class="111">044</div>
<div class="111">045</div>
<div class="111">046</div>
<div class="111">047</div>
<div class="111">048</div>
<div class="111">049</div>
<div class="111">050</div>
<div class="111">051</div>
<div class="111">052</div>
<div class="111">053</div>
<div class="111">054</div>
<div class="111">055</div>
<div class="111">056</div>
<div class="111">057</div>
<div class="111">058</div>
<div class="111">059</div>
<div class="111">060</div>
<div class="111">061</div>
<div class="111">062</div>
<div class="111">063</div>
<div class="111">064</div>
<div class="111">065</div>
<div class="111">066</div>
<div class="111">067</div>
<div class="111">068</div>
<div class="111">069</div>
<div class="111">070</div>
<div class="111">071</div>
<div class="111">072</div>
<div class="111">073</div>
<div class="111">074</div>
<div class="111">075</div>
<div class="111">076</div>
<div class="111">077</div>
<div class="111">078</div>
<div class="111">079</div>
<div class="111">080</div>
<div class="111">081</div>
<div class="111">082</div>
<div class="111">083</div>
<div class="111">084</div>
<div class="111">085</div>
<div class="111">086</div>
<div class="111">087</div>
<div class="111">088</div>
<div class="111">089</div>
<div class="111">090</div>
<div class="111">091</div>
<div class="111">092</div>
<div class="111">093</div>
<div class="111">094</div>
<div class="111">095</div>
<div class="111">096</div>
<div class="111">097</div>
<div class="111">098</div>
<div class="111">099</div>
<div class="111">100</div>
<div>
    <button class="but hide" onclick="foo();">返回顶部</button>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(window).scroll(function () {

        if ($(window).scrollTop() > 100){
            $(".but").removeClass("hide");
        }else {
            $(".but").addClass("hide");
        }
    });
    function foo() {
        $(window).scrollTop(0);
    }

</script>
</body>
</html>
使用jQuery实现页面“返回顶部“（pycharm编辑）

 

posted @ 2017-11-16 17:00  主啊~  阅读(92)  评论(0)  编辑  收藏  举报