采纳追加100分，求CSS,JS,鼠标滚动到某位置，元素出现？
我在在网页右下角加一个“返回顶部”的按钮，刚开始不显示，当鼠标向下滚动到某位置后，按钮出现，回到顶部时候，按钮消失请帮我用CSS，JS实现，其他语言不懂！...
我在在网页右下角加一个“返回顶部”的按钮，刚开始不显示，当鼠标向下滚动到某位置后，按钮出现，回到顶部时候，按钮消失
请帮我用CSS，JS实现，其他语言不懂！ 展开
请帮我用CSS，JS实现，其他语言不懂！ 展开
展开全部
<style>.content{width: 980px;margin: 0 auto;background: #eee;height: 2000px;}</style>
<div class="content"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var toTopObj = {
opt:{
src:"http://img0.imgtn.bdimg.com/it/u=1279128727,1474415759&fm=23&gp=0.jpg",
width:32,
height:98,
scrollTo:300
},
isIE: function(ver){
//支持判断ie9以下的ie浏览器，ie10以上不再支持条件表达式
var b = document.createElement('b')
b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
return b.getElementsByTagName('i').length === 1
},
show:function(){
if(!this.ie6){
this.btn.fadeIn();
}else{
this.btn.stop(1,1).show().animate({
"top":$(document).scrollTop()+this.opt.scrollTo
});
}
},
hide: function(){
this.btn.hide();
},
init:function(obj){
if(this.btn){
return;
}else{
this.btn = $('<img src="'+this.opt.src+'" style="position:fixed;top:'+this.opt.scrollTo+'px;cursor:pointer;display:none;" width="'+this.opt.width+'" height="'+this.opt.height+'" alt="返回顶部" />').appendTo("body");
}
this.btn.css("left",$(obj).offset().left+$(obj).width()+1);
$(window).on("scroll.b2top",function()
{
clearTimeout(toTopObj.timer);
toTopObj.timer = setTimeout(function(){
$(document).scrollTop()>300?toTopObj.show():toTopObj.hide();
},100);
}).trigger("scroll.b2top");
this.btn.on("click.b2top",function()
{
$('html,body').animate({'scrollTop':0},0);
});
if(this.isIE(6)){
this.btn.css("position","absolute");
this.ie6=true;
}
}
};
toTopObj.init(".content");
//基于jquery，.content 为中间内容部分
</script>
<div class="content"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var toTopObj = {
opt:{
src:"http://img0.imgtn.bdimg.com/it/u=1279128727,1474415759&fm=23&gp=0.jpg",
width:32,
height:98,
scrollTo:300
},
isIE: function(ver){
//支持判断ie9以下的ie浏览器，ie10以上不再支持条件表达式
var b = document.createElement('b')
b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
return b.getElementsByTagName('i').length === 1
},
show:function(){
if(!this.ie6){
this.btn.fadeIn();
}else{
this.btn.stop(1,1).show().animate({
"top":$(document).scrollTop()+this.opt.scrollTo
});
}
},
hide: function(){
this.btn.hide();
},
init:function(obj){
if(this.btn){
return;
}else{
this.btn = $('<img src="'+this.opt.src+'" style="position:fixed;top:'+this.opt.scrollTo+'px;cursor:pointer;display:none;" width="'+this.opt.width+'" height="'+this.opt.height+'" alt="返回顶部" />').appendTo("body");
}
this.btn.css("left",$(obj).offset().left+$(obj).width()+1);
$(window).on("scroll.b2top",function()
{
clearTimeout(toTopObj.timer);
toTopObj.timer = setTimeout(function(){
$(document).scrollTop()>300?toTopObj.show():toTopObj.hide();
},100);
}).trigger("scroll.b2top");
this.btn.on("click.b2top",function()
{
$('html,body').animate({'scrollTop':0},0);
});
if(this.isIE(6)){
this.btn.css("position","absolute");
this.ie6=true;
}
}
};
toTopObj.init(".content");
//基于jquery，.content 为中间内容部分
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
简单 看我的 我先去写代码了 等会贴上来
写的很粗糙 但是功能是能用的
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script>
//判断当前滚动条的距离顶部的距离
$(window).scroll(function() {
var height = $("body").scrollTop(); //获取 滚动条高度
var windowtop = document.body.clientHeight // 获取屏幕的高度
if((windowtop+height)>=300 ){
$('.show').show();
}
});
//返回到顶部的方法
function backtop(){
$("body").scrollTop(0); //将高度设置为0 就返回到顶部了
}
</script>
<style>
body {
overflow: scroll;
}
.main{
height:900px;
width:100%;
}
.show{
height:200px;
width:100%;
display:none;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="show" onclick="backtop()">回到顶部</div>
</body>
</html>
写的很粗糙 但是功能是能用的
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script>
//判断当前滚动条的距离顶部的距离
$(window).scroll(function() {
var height = $("body").scrollTop(); //获取 滚动条高度
var windowtop = document.body.clientHeight // 获取屏幕的高度
if((windowtop+height)>=300 ){
$('.show').show();
}
});
//返回到顶部的方法
function backtop(){
$("body").scrollTop(0); //将高度设置为0 就返回到顶部了
}
</script>
<style>
body {
overflow: scroll;
}
.main{
height:900px;
width:100%;
}
.show{
height:200px;
width:100%;
display:none;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="show" onclick="backtop()">回到顶部</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.jump-top-box{
width: 40px;
position: fixed;
z-index: 999;
top: -1000px;
display: block;
}
.jump-top-box .jump-top{
height: 40px;
display: block;
position: relative;
z-index: 1;
margin-bottom: 5px;
}
.jump-top a{
background: #a0a0a0;
color: #000;
font-size: 12px;
text-decoration: none;
display: block;
padding: 6px 8px 8px;
height: 26px;
width: 24px;
line-height: 14px;
position: absolute;
z-index: 2;
left: 0;
top: 0;
overflow: hidden;
border-radius: 2px;
}
</style>
<script>
window.onload = function () {
function scrollFunc(e){
console.log(window.pageYOffset);
console.log(window.screen.availHeight);
var back = document.getElementById("back");
if(window.screen.availHeight > document.body.clientHeight - window.pageYOffset){
back.style.visibility ="visible";
}else{
back.style.visibility ="hidden";
}
}
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
}
</script>
</head>
<body style="height:1000px">
<div class="jump-top-box" style="right: 5px; top: 580px;">
<div id="back" class="jump-top" style="visibility: hidden;">
<a href="#" target="_self">返回顶部</a>
</div>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你是要源码还是要原理
追问
代码，加点注释
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
