divcss3样式表制作jquery返回顶部特效资源-CSDN文库

共1个文件

html：1个

4星 · 超过85%的资源需积分: 9 36 浏览量 2012-09-28 10:17:55 上传评论收藏 2KB RAR 举报

在网页设计中，"返回顶部"的特效是一个常见的交互元素，它可以帮助用户快速地将页面滚动到顶部，提升用户体验。本教程将详细讲解如何利用HTML的`div`元素结合CSS3样式表和jQuery来实现这一功能。我们需要创建一个`div`元素作为返回顶部的按钮。在HTML文件（如`demo.html`）中，可以这样编写： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>返回顶部特效</title> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </head> <body>  ... <div id="back-to-top">返回顶部</div> </body> </html> ``` 在这个例子中，我们在`body`底部添加了一个`div`，并设置了ID为`back-to-top`。这个按钮默认是隐藏的，我们需要通过CSS3来控制它的显示和隐藏。接下来，我们创建一个名为`styles.css`的CSS文件，用于定义样式： ```css #back-to-top { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; border-radius: 50%; cursor: pointer; display: none; /* 初始状态隐藏 */ } #back-to-top:hover { background-color: #000; } ``` 这里，我们设置了按钮的位置、大小、颜色以及鼠标悬停时的背景颜色。`position: fixed;`使其始终固定在屏幕底部右侧。`display: none;`初始时隐藏按钮，之后通过jQuery来控制它的显示和隐藏。我们需要在`script.js`中编写jQuery代码来实现动态效果： ```javascript $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 200) { // 当页面滚动超过200像素时显示返回顶部按钮 $('#back-to-top').fadeIn(200); } else { $('#back-to-top').fadeOut(200); } }); $('#back-to-top').click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 800); // 点击按钮后，页面平滑滚动回顶部 }); }); ``` 这段jQuery代码监听了窗口的滚动事件，当页面滚动超过200像素时，按钮`#back-to-top`会淡入显示；当页面滚动回到顶部附近时，按钮则淡出隐藏。同时，当用户点击返回顶部按钮时，页面会以平滑动画的方式在800毫秒内滚动到顶部。总结来说，这个项目通过结合HTML的`div`元素、CSS3样式和jQuery脚本，实现了当页面滚动到一定位置时，返回顶部按钮自动出现，点击按钮则能平滑滚动回页面顶部的效果。这不仅提升了用户体验，也展示了HTML、CSS和JavaScript在网页交互设计中的应用。

资源推荐

资源详情

资源评论

收起资源包目录

cad81874d1eea87dc41aa0e147a15157.rar （1个子文件）

demo.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div css3样式表制作jquery返回顶部特效</title> <meta name="description" content="div css3样式表制作jquery返回顶部按钮，浏览器滚动显示返回顶部按钮，点击滑动返回顶部。jquery下载" /> </head> <body> <script src="http://chocotemplates.com/preview/corporate/impact/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var ScrollToTop=ScrollToTop||{ setup:function(){ var a=$(window).height()/2; $(window).scroll(function(){ (window.innerWidth?window.pageYOffset:document.documentElement.scrollTop)>=a?$("#ScrollToTop").removeClass("Offscreen"):$("#ScrollToTop").addClass("Offscreen") }); $("#ScrollToTop").click(function(){ $("html, body").animate({scrollTop:"0px"},400); return false }) } }; </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body {font-family:"helvetica neue",arial,sans-serif;font-size:12px;color:#211922;} .btnimg{cursor:pointer;border:0;margin:0;padding:0;} #ScrollToTop{ position:fixed;_position:absolute;z-index:4;right:15px;bottom:-10px;width:70px;padding:20px 10px 30px;display:block;font-size:15px;font-weight:800;text-align:center;border-width:1px 1px 0 1px;border-style:solid; box-shadow:0 0 #fff, 0 1px 3px rgba(34,25,25,0.5); -moz-box-shadow:0 0 #fff, 0 1px 3px rgba(34,25,25,0.5); -webkit-box-shadow:0 0 #fff, 0 1px 3px rgba(34,25,25,0.5); -moz-transition:bottom 250ms ease-in-out; -webkit-transition: bottom 250ms ease-in-out; } #ScrollToTop.Offscreen{ bottom:-100px; -moz-transition-duration:250ms; -webkit-transition-duration:250ms; } /* White Button */ .Button2.WhiteButton{ background-color:#f0eded; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfafb), to(#f0eded), color-stop(.5,#f9f7f7),color-stop(.5,#f6f3f4)); background-image:-moz-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded); background-image:-o-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded); background-image:-webkit-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded); border-color:#bbb; color:#524d4d; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfafb', endColorstr='#f0eded'); text-shadow:0 1px rgba(255,255,255,0.9); } .Button2.WhiteButton:hover{ background-color:#f2f0f0; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfcfc), to(#f2f0f0), color-stop(.5,#fbf9f9),color-stop(.5,#f7f5f6)); background-image:-moz-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0); background-image:-o-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0); background-image:-webkit-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0); border-color:#c3c3c3; color:#666060; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfcfc', endColorstr='#f2f0f0'); text-shadow:0 1px rgba(255,255,255,1); } .Button2.WhiteButton:active{ background-color:#ebe8e8; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f4f5), to(#ebe8e8), color-stop(.5,#f3f0f0),color-stop(.5,#f1eeef)); background-image:-moz-linear-gradient(top, #f8f4f5, #f3f0f0 50%, #f1eeef 50%, #ebe8e8); background-image:-o-linear-gradient(top, #f8f4f5, #f3f0f0 50%, #f1eeef 50%, #ebe8e8); background-image:-webkit-linear-gradient(top, #f8f4f5, #f3f0f0 50%, #f1eeef 50%, #ebe8e8); border-color:#b7b7b7; color:#454141; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f4f5', endColorstr='#ebe8e8'); text-shadow:0 1px rgba(255,255,255,0.8); } </style> <div style="height:2000px;"></div> <button id="ScrollToTop" class="btnimg Button2 WhiteButton Offscreen" type="button">返回<br />顶部</button> <script type="text/javascript"> $(document).ready(function(){ ScrollToTop.setup(); }); </script> </body> </html>

评论收藏

内容反馈