采纳追加100分，求CSS,JS,鼠标滚动到某位置，元素出现？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了采纳追加100分，求CSS,JS,鼠标滚动到某位置，元素出现？相关的知识，希望对你有一定的参考价值。
我在在网页右下角加一个“返回顶部”的按钮，刚开始不显示，当鼠标向下滚动到某位置后，按钮出现，回到顶部时候，按钮消失
请帮我用CSS，JS实现，其他语言不懂！
<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> 参考技术A 简单 看我的 我先去写代码了 等会贴上来
写的很粗糙 但是功能是能用的
<!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> 参考技术B <!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>本回答被提问者采纳 参考技术C 你是要源码还是要原理追问
代码，加点注释
JS如何判断鼠标滚轮事件分析
参考技术A 我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。先分析原理：我们是通过判断鼠标滚动的获取一个值，然后根据这个值判断滚动的方向。然而不同浏览器有不同的获取方法，所以要分浏览器写方法。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请先去了解鼠标滚轮(mousewheel)和DOMMouseScroll事件。过程中需要添加事件监听：兼容firefox采用addEventListener监听。js返回数值判断滚轮上下判断滚轮向上或向下在浏览器中也要考虑兼容性（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上也是不一致，但是含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。 具体的代码如下所示：<label for=wheelDelta滚动值:</label(IE/Opera)<input type=text id=wheelDelta/<label for=detail滚动值:(Firefox)</label<input type=text id=detail/<script type=text/javascriptvar scrollFunc=function(e)e = e || window.event;var t1=document.getElementById(wheelDelta);var t2=document.getElementById(detail);if(e.wheelDelta)//IE/Opera/Chromet1.value=e.wheelDelta;else if(e.detail)//Firefoxt2.value=e.detail;/*监听事件*/本回答被提问者采纳以上是关于采纳追加100分，求CSS,JS,鼠标滚动到某位置，元素出现？的主要内容，如果未能解决你的问题，请参考以下文章