码迷,mamicode.com
首页 > Web开发 > 详细

jQuery回到顶部

时间:2016-11-30 17:18:49      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:函数   display   滚动   yun   top   lte   zh-cn   animate   :hover   

jquery回到顶部

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="loveyunk" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>jQuery回到顶部</title>
<script src="jQuery.js"></script>
<script>
$(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {   //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
            $(#toTop).fadeIn();  
        } else {
            $(#toTop).fadeOut();
        }
    });
    $("#toTop").click(function(){
        $("html,body").animate({scrollTop:0},"slow");
        return false;
    });   
    // 当用户滚动指定的元素时,会发生 scroll 事件。
    // scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
    // scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。 
}); 
</script>
<style>
#toTop{
    width:47px;
    height:46px;
    display: block;
    background: #eee url(images/bg2.png) no-repeat -53px -53px;
    position: fixed;
    left: 91%;
    top:80%;
    /*opacity: 0.8;*/
    display: none;
}
#toTop:hover{
    /*opacity: 1;*/
    /*filter:alpha(opacity=100);*/
    background: #ddd url(images/bg2.png) no-repeat -99px -53px;
}
</style>
</head>
<body>
    <a href="#" id="toTop" title="回到顶部"></a>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <p>34</p>
    <p>35</p>
    <p>36</p>
    <p>37</p>
    <p>38</p>
    <p>39</p>
    <p>40</p>
    <p>41</p>
    <p>42</p>
    <p>43</p>
    <p>44</p>
    <p>45</p>
    <p>46</p>
    <p>47</p>
    <p>48</p>
    <p>49</p>
    <p>50</p>
    <p>51</p>
    <p>52</p>
    <p>53</p>
    <p>54</p>
    <p>55</p>
    <p>56</p>
    <p>57</p>
    <p>58</p>
    <p>59</p>
    <p>60</p>
    <p>61</p>
    <p>62</p>
    <p>63</p>
    <p>64</p>
    <p>65</p>
    <p>66</p>
</body>
</html>

 

jQuery回到顶部

标签:函数   display   滚动   yun   top   lte   zh-cn   animate   :hover   

原文地址:http://www.cnblogs.com/loveyunk/p/6118269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!