當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScriptjQuery】返回顶部
生活随笔
收集整理的這篇文章主要介紹了
【JavaScriptjQuery】返回顶部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>返回頂部</title> <meta name="Keywords" content="關鍵詞,關鍵詞"> <meta name="Description" content=""> <!--css,js--> <style type="text/css"> *{margin:0;padding:0;} p{width:300px; height:200px;background:#ccc; margin:10px auto;} .top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;} .top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;} </style> <script type="text/javascript" src="js/jquery.js" ></script> </head> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <div class = "top"> <span></span> </div> <script type = "text/javascript"> //返回頂部的小圖標的現隱
$(window).scroll(function(){ if($(window).scrollTop() >= 100){ $(".top").fadeIn(600); }else{ $(".top").stop(true,true).fadeOut(600); } }); //返回頂部 $(".top").click(function(){ $("html,body").animate({ scrollTop:0 },800); }); </script> </body>
</html>
?
轉載于:https://www.cnblogs.com/dflmg/p/6385353.html
總結
以上是生活随笔為你收集整理的【JavaScriptjQuery】返回顶部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何让其他机器访问你的oracle数据库
- 下一篇： Windows 计划任务功能设置闹钟~