中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery實現回到頂部功能

發布時間:2020-07-08 21:10:57 來源:網絡 閱讀:445 作者:motouzhixin 欄目:web開發

在網頁中,我們經常會由于網頁內容過長,而需要在瀏覽網頁時有一個快速回到網頁頂部的功能,在瀏覽網頁內容離頂部有一段距離時,出現快速回到網頁頂部的工具,從而能使我們的網頁更人性化。

以下分為幾個步驟來實現:

步驟1引入jquery

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

步驟2在網頁中引入回到頂部的網頁元素,并且設置元素的樣式

<div id="gotop"></div>設置元素樣式,默認開始隱藏

<style type="text/css">

#gotop{

display:none;

width:55px;

height:55px;

position:fixed;

right:50px;

bottom:50px;

url(p_w_picpaths /backtop2013.png) no-repeat -70px 0px;

}

</style>

步驟3定義js來控制元素的漸顯、漸隱功能并且控制網頁滾動條的位置

<script type="text/javascript">

function goTop({

    $(window).scroll(function(e) {

//若滾動條離頂部大于100元素

if($(window).scrollTop()>100)

             $("#gotop").fadeIn(1000);//1秒的間隔漸顯id=gotop的元素

else

             $("#gotop").fadeOut(1000);//1秒的間隔漸隱id=gotop的元素

   });

1};

$(function(){

//點擊回到頂部的元素

    $("#gotop").click(function(e) {

//1秒的間隔返回頂部

            $('body,html').animate({scrollTop:0},1000);

   });

    $("#gotop").mouseover(function(e) {

        $(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat 0px 0px");

   });

    $("#gotop").mouseout(function(e) {

        $(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat -70px 0px");

   });

    goTop();//實現回到頂部元素的漸顯與漸隱

});

</script>

按照上面的3個步驟,將可以實現回到頂部的功能。


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

三原县| 南安市| 凤冈县| 宾阳县| 大城县| 绵竹市| 新巴尔虎左旗| 昂仁县| 康马县| 岳池县| 丰顺县| 兴宁市| 汉川市| 扬州市| 奇台县| 大姚县| 潍坊市| 比如县| 阜南县| 红河县| 阿拉善左旗| 康乐县| 菏泽市| 达拉特旗| 喜德县| 翁牛特旗| 古蔺县| 大理市| 海淀区| 苏尼特左旗| 太康县| 长武县| 仁布县| 鄯善县| 五家渠市| 北安市| 兴国县| 黄冈市| 长宁县| 江口县| 永春县|