页边栏浮动条+动态返回顶部的JS效果

2024-09-05 12:18:26

字体：大中小

来源：转载

供稿：网友

下面分享一款福州网论坛帖子页面的绝对定位浮动导航条+动态返回网页顶部的JS效果，也就是智能判断是否需要“回到顶部”的按钮，如果需要，则动态出现，并伴随淡入淡出效果，另外侧边栏菜单的应用也是挺不错的，相信你会喜欢的。

<!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>回到顶部</title><style type="text/css">body{ background-color:#bbac85;}ul,li{ margin:0px; padding:0px; list-style:none;}.navbox{ width:95px; height:auto;z-index:99; left:2px; bottom:5px;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); font-family: "宋体";}.mj_nav{ width:93px; height:auto; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; padding-bottom:15px;}.mj_nav_bt{ width:93px; height:30px; background-color:#806f5f; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#fde399; margin-bottom:10px;}.mj_nav_list{ width:83px; height:auto; padding:0px 5px;}.nav_span{ display:block; width:68px; padding-left:15px; height:24px; line-height:24px; background-image:url(/jscss/demoimg/201208/mjnav.gif); background-repeat:no-repeat; background-position:5px 8px; color:#594d42; font-size:14px; cursor: pointer;}.mj_sn{ background-position:5px -12px;}.mj_nav_list ul{ width:68px; height:auto; padding:0px 0px 15px 15px; display:none;}.mj_nav_list li{ width:68px; height:24px; line-height:24px; font-size:14px; overflow:hidden;}.mj_nav_list li a{ color:#0a57b7; text-decoration: underline;}.mj_nav_list li a:hover{ color: #FF6600;}.guanbi,.gotop{ width:93px; height:30px; line-height:30px; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; text-align:center; font-size:14px; color:#594d42; margin-top:3px; cursor: pointer;}.gotop{ display:none;}.zhangkai{ width:20px; height:auto; padding:10px 5px; line-height:20px; font-size:14px; text-align:center;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px; border:1px solid #806f5f; background-color:#f3f3f3; POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); z-index:100; left:0px; bottom:150px; display:none; cursor: pointer; color:#594d42;}.xx{ height:1000px;}</style><script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script><script type="text/javascript">	  $(document).ready(function(){			$(".mj_nav_list span").click(function(){			    $(".mj_nav_list span").not($(this)).removeClass("mj_sn");				$(this).toggleClass("mj_sn");				$(".mj_nav_list ul").not($(this).next()).slideUp();				$(this).next().slideToggle(500);				//$(this).next().toggle();			});			$(window).scroll(function(){			   if ( $(window).scrollTop() > 50 ){                                $(".gotop").fadeIn(800);                        } else {                                $(".gotop").fadeOut(500);                        };			});			$(".gotop").click(function(){			    $(window).scrollTop(0);			});			$(".guanbi").click(function(){			    $(".navbox").hide();				$(".zhangkai").show();			});			$(".zhangkai").click(function(){			    $(this).hide();				$(".navbox").show(500);			});	  });    </script></head><body><div class="navbox"><div class="mj_nav"><div class="mj_nav_bt">网站导航</div><div class="mj_nav_list"><span class="nav_span">源码下载</span><ul><li>DELPHI通过URL触发实现协议注册</li><li>带加载的jQuery伸缩效果特效</li><li>PEDump Delphi版文件分析器</li><li>灰鸽子翻版 DarkMoon v4.11 For Delphi</li><li>vb 3d游戏实例，飞行战机射击</li><li>jQuery CookBook中文版教程 pdf</li><li>冰河2008远程控制Delphi完整版</li><li>C#做的窗体多文本框Demo实例</li><li>Jquery+JSON+ASP.NET实现WebService交互实例</li></ul></div><div class="mj_nav_list"><span class="nav_span">分类信息</span><ul><li>网页计算器，仿Vista风格</li><li>Js检测判断数字是否为两位数</li><li>页面加载后累加，自加1，JS自动累加函数</li><li>输入两个数字，比较它们的大小</li><li>点击按钮，值自动加1</li><li>Js使用parseInt解析数字，并求和</li><li>用typeof查看数据类型</li><li>复选框（checkbox）全选/全不选/反选代码</li><li>播放列表文字显示/隐藏，点击展开</li></ul></div><div class="mj_nav_list"><span class="nav_span">编程论坛</span><ul><li>源码爱好者</li><li>网页特效</li><li>源码下载</li><li>常用软件</li></ul></div></div><div class="gotop">返回顶部</div><div class="guanbi">点击关闭</div></div><div class="zhangkai">栏目导航</div><div class="xx"></div></body></html>

上一篇：Js拖拽图片上传，拖拽添加附件