论坛帖子页面左下角的绝对定位浮动的导航条+返回顶部的JS特效

稿源：互联网 2018-10-07 00:18:53 点击： 12263 撤稿纠错

从一个论坛的帖子页面扒下来的，左下角的绝对定位浮动的导航条特效，当滚动条拉到底部时，自动出现返回顶部按钮链接，否则不显示，非常实用的一款JS特效

以下讨论的是和论坛帖子左下角绝对定位浮动导航条返回顶部相关的论坛帖子页面左下角的绝对定位浮动的导航条+返回顶部的JS特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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(http://js.alixixi.com/UploadPic/2012-8/2012821381792487.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="http://www.alixixi.com/script/jquery-1.8.3.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><a href="http://js.alixixi.com">网页特效</a></li>
<li><a href="http://js.alixixi.com">酒吧夜店论坛</a></li>
<li><a href="http://js.alixixi.com">活动召集</a></li>
<li><a href="http://js.alixixi.com">福州交友</a></li>
<li><a href="http://js.alixixi.com">福州电影院</a></li>
<li><a href="http://js.alixixi.com">宠物论坛</a></li>
<li><a href="http://js.alixixi.com">大利嘉论坛</a></li>
<li><a href="http://js.alixixi.com">心理测试</a></li>
<li><a href="http://js.alixixi.com">笑话吧</a></li>
<li><a href="http://js.alixixi.com" >彩票论坛</a></li>
<li><a href="http://js.alixixi.com">股票论坛</a></li>
<li><a href="http://js.alixixi.com">电脑论坛</a></li>
<li><a href="http://js.alixixi.com">福州公交</a></li>
</ul>
</div>

<div class="mj_nav_list">
<span class="nav_span">分类信息</span>
<ul>
<li><a href="http://js.alixixi.com">房屋出租</a></li>
<li><a href="http://js.alixixi.com">招聘求职</a></li>
<li><a href="http://js.alixixi.com">二手交易市场</a></li>
<li><a href="http://js.alixixi.com" >商家优惠促销信息</a></li>
<li><a href="http://js.alixixi.com">福州订餐</a></li>
<li><a href="http://js.alixixi.com">团购活动</a></li>
<li><a href="http://js.alixixi.com">综合服务</a></li>
<li><a href="http://js.alixixi.com">福州拼车</a></li>
<li><a href="http://js.alixixi.com">商家通讯录</a></li>
</ul>
</div>

<div class="mj_nav_list">
<span class="nav_span">八县论坛</span>
<ul>
<li><a href="http://js.alixixi.com">福清论坛</a></li>
<li><a href="http://js.alixixi.com">长乐论坛</a></li>
<li><a href="http://js.alixixi.com">平潭论坛</a></li>
<li><a href="http://js.alixixi.com">连江论坛</a></li>
<li><a href="http://js.alixixi.com">闽候论坛</a></li>
<li><a href="http://js.alixixi.com">闽清论坛</a></li>
<li><a href="http://js.alixixi.com">罗源论坛</a></li>
<li><a href="http://js.alixixi.com">永泰论坛</a></li>
</ul>
</div>
</div>

<div class="gotop">返回顶部</div>
<div class="guanbi">点击关闭</div>
</div>

<div class="zhangkai">论坛栏目导航</div>
<div class="xx"></div>
</body>
</html>

关于论坛帖子页面左下角的绝对定位浮动的导航条+返回顶部的JS特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018100782652.shtml方便下次再访问哦。

·上一篇： fixed仿淘宝商品列表顶部浮动工具栏效果特效
·下一篇： JS制作的一分钟时间按秒进行倒计时的特效代码

论坛帖子页面左下角的绝对定位浮动的导航条+返回顶部的JS特效

文章分类LIST >>返回首页

最新游戏

最新新闻