一、回到顶部
<!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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#main { width: 1000px; height: 3200px; }
#go_top { display: none; position: fixed; right: 10px; bottom: 10px; z-index: 100px;_position: absolute;_bottom: "auto";_top: expression(eval(document.documentElement.scrollTop)+700) }
#go_a_top { display: block; width: 50px; height: 50px; background: url(/returnTop/Img/go_top.gif) no-repeat 0 0 transparent; }
#go_a_top:hover { background: url(/returnTop/Img/go_top.gif) no-repeat 0 -100px transparent; }
</style>
<script type="text/javascript">
$.fn.extend({
returnTop: function () {
var $elem = this.find("a:first");
var $this = this;
$elem.bind("click", function () {
$("body,html").animate({ scrollTop: 0 }, 150);
});
$("body")
.add($(window))
.bind("scroll", function () {
var st = $(document).scrollTop();
(st > 100) ? $this.fadeIn(500) : $this.fadeOut(500);
});
}
});
$(function () {
$("#go_top").returnTop();
});
</script>
</head>
<body>
<div id="main">
<p style="margin-top:800px">nihao</p>
</div>
<div id="go_top"> <a id="go_a_top" href="javascript:;" title="回到顶部"><img src="http://res.c.hjfile.cn/app/images/go_top.gif" /></a> </div>
</body>
</html>
二、回到顶部
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()!=0){
$('#toTop').fadeIn();}
else{
$('#toTop').fadeOut();} });
$('#toTop').click(function(){ //back to top
$('body,html').animate({scrollTop:0},800);});
});
</script>
<div id="toTop">^<br/>返<br/>回<br/>顶<br/>部</div>
<style type="text/css">
#toTop{
width:25px;
height:120px;
border:1px solid #ccc;
text-align:center;
padding-top:10px;
position:fixed;
bottom:200px;
right:20px;
cursor:pointer;
display:none;
color:##0FC;
font-size:11px;
}
</style>
三、保持位置不变（带有闪动）
var base_url = "img/ny_35.gif";
document.writeln("<div id='ShowQQ' style='position:absolute; z-index: 100;'> ");
document.writeln("<img src='"+base_url+"' frameborder='0' scrolling='no'></iframe>");
document.writeln("</div>");
//initEcAd()
var QQfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var QQst = document.getElementById("ShowQQ").style;
QQst.top = ( QQfrm.clientHeight - 33) + "px";
QQst.left = ( QQfrm.clientWidth - 100 ) + "px";
function moveR() {
QQst.top = ( QQfrm.scrollTop + QQfrm.clientHeight - 44 ) + "px";
QQst.left = ( (QQfrm.scrollLeft + QQfrm.clientWidth)/2+340) + "px";
}
setInterval("moveR();", 80);
四、保持位置不变
<body><style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.pagedemo{width:760px;margin:0 auto;}
#nav_left_layout{position:absolute;height:30px;width:760px;background:#dedede;}
</style>
<div class="pagedemo">
<div style="height:100px;background:#eee;"></div>
<div id="nav_left_layout"><a title="仿淘宝默认排序搜索框" href="http://www.jsfoot.com/"><img src="images/searchbox.gif" width="760" height="30" alt="仿淘宝默认排序搜索框" /></a></div>
<div style="height:900px;overflow:hidden;"></div>
</div>
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#nav_left_layout").smartFloat();
</script>
</body>
五、保持位置不变
sanhaosheng 项目（原美丽说）
$(window).bind("scroll", function () {
var top_top = $(document).scrollTop(); //卷上去的高度
if (top_top > 100) {
$('#navigationtop').removeClass('navigation').addClass('navigationtop');
} else {
$('#navigationtop').removeClass('navigationtop').addClass('navigation');
}
if (top_top > 0) {//回到顶部
$("#topNav").css("display", "");
} else {
$("#topNav").css("display", "none");
}
if ($(document).scrollTop() + $(window).height() > $(document).height() - 500) {
doSomeThing();
}
})
css
.navigationtop{ position: fixed;_position: absolute; z-index: 4566; left:0px; top:0; width: 100%; margin:0 auto }
#topNav {
width: 30px;
z-index: 100; /*设置浮动层次*/
overflow: visible;
position: fixed;
bottom: 40px;
margin-left:980px; /* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute; /*IE6 用absolute模拟fixed*/
_top: expression(documentElement.scrollTop + documentElement.clientHeight-70 + "px"); /*IE6 动态设置top位置*/
/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶，可以加一个数值达到排版效果 */
height: 63px;
}
<%-- 回到顶部--%>
<a name="totop" ></a>
<div id="topNav" style="display:none;">
<a href="#totop" style="float:right;">
<img src="http://www.t3j4.com/images/return_top2.png" width="40" />
</a>
</div>
<%--导航--%>
<div id="navigationtop">
<div class="navigation">
<div class="nav-box">
<ul class="floatleft" >
<li class=""><a href="http://www.t3j4.com/index.aspx" class="nav-title nav-first"><span>首页</span><!--<i></i>--></a></li>
<li class=""><a href="http://www.t3j4.com/index_txh.aspx" class="nav-title" ><span>挑喜欢</span><!--<i></i><em></em>--></a></li>
<li><a href="/index_txh.aspx?id=1&type=1" class="nav-title-fy selected_s" ><span>衣服</span></a></li><li class="nav_bg_line"></li><li><a href="/index_txh.aspx?id=2&type=1" class="nav-title-fy" ><span>鞋子</span></a></li><li class="nav_bg_line"></li><li><a href="/index_txh.aspx?id=3&type=1" class="nav-title-fy" ><span>包包配饰</span></a></li><li class="nav_bg_line"></li><li><a href="/index_txh.aspx?id=7&type=1" class="nav-title-fy" ><span>童装</span></a></li><li class="nav_bg_line"></li><li><a href="/index_txh.aspx?id=4&type=1" class="nav-title-fy" ><span>家居</span></a></li><li class="nav_bg_line"></li><li><a href="/index_txh.aspx?id=6&type=1" class="nav-title-fy" ><span>美食</span></a></li>
<li class=" " style="width:34px;"></li>
<li class=" "><a href="http://www.t3j4.com/index_jsh.aspx" class="nav-title" ><span>主题汇</span><!--<i></i><em></em>--></a></li>
<li><a href="/index_jsh_detail.aspx?id=11&type=2" class="nav-title-fy" ><span>森系慢生活</span></a></li><li class="nav_bg_line"></li><li><a href="/index_jsh_detail.aspx?id=10&type=2" class="nav-title-fy" ><span>冬日暖阳</span></a></li><li class="nav_bg_line"></li><li><a href="/index_jsh_detail.aspx?id=9&type=2" class="nav-title-fy" ><span>饰你让我更美丽</span></a></li>
</ul>
<div class="floatright" >
<ul>
<li style="background:url(http://www.t3j4.comhttp://www.t3j4.com/images/sc_an.png) no-repeat center center;"> <a href="javascript:void(0)" οnclick="addfavorite()" style="text-decoration:none"> </a> </li>
<li style="background:url(http://www.t3j4.comhttp://www.t3j4.com/images/gz_an.png) no-repeat center center;"> <a href="http://weibo.com/t3j42012" target="_blank" style="text-decoration:none"> </a></li>
</ul>
</div>
</div>
</div>
</div>
六、jsfoot顶部固定条特效
#Header{position:fixed;z-index:103;top:0;right:0;left:0;height:38px;border-bottom:1px solid #e0dede;background-color:#F7F7F7;background-image:linear-gradient(#fff, #f7f6f5);background-image:-moz-linear-gradient(#fff, #f7f6f5);background-image:-o-linear-gradient(#fff, #f7f6f5);background-image:-webkit-linear-gradient(#fff, #f7f6f5);box-shadow:inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);-moz-box-shadow:inset 0 1px #fff, 0 1px 2px rgba(34,25,25,0.4);-webkit-box-shadow:inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4)}
#Header{position:absolute;top:expression(eval(document.documentElement.scrollTop))}
扫一扫
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
