jQuery回到顶部

Posted loveyunk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery回到顶部相关的知识，希望对你有一定的参考价值。

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回到顶部的主要内容，如果未能解决你的问题，请参考以下文章

jquery点击回到页面顶部方法

简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

JQuery实现淡入淡出的回到顶部按钮

常用小Demo：用js/jQuery实现回到页面顶部功能

几条jQuery代码片段助力Web开发效率提升

jQuery回到顶部