求大神帮我看看以下这段js代码为什么没实现我想要的效果，我是个菜鸟，自学网页制作才一个月都不太懂

我想要实现一个返回顶部的效果，并且是滚动条滑动一小段才会出现返回顶部的按钮
下面的代码在webstorm里实现不了这个效果，求专业人士解答
<body>
<div class="top">
<img src="images/返回顶部.png">
</div>
<h1>这是顶部</h1>
中间是一连串的文字内容都在h1标签里
<h1>这是底部</h1>
</body>
<script>
topobj=document.getElementById('top');
nu=navigator.userAgent;
window.onscroll=function(){
if(nu.match(/chrome/i)){
st=document.body.scrollTop;
if(st>200){
topobj.style.dispaly='block';
}else{
topobj.style.display='none';
}
}else{

st=document.documentElement.scrollTop;
if(st>200){
topobj.style.dispaly='block';
}else{
topobj.style.display='none';
}

}
}

topobj.onclick=function(){
nu=navigator.userAgent;
if(nu.match(/chrome/i)){
//谷歌
document.body.scrollTop=0;
}else{
//非谷歌
document.documentElement.scrollTop=0;
}
}
</script>
回到顶部效果和滑动一段才出现按钮的效果都实现不了。那个返回顶部按钮（用的是一张png图片）的相关属性在前面<style>部分已经设置好了，太长了这里面放不下了

举报该问题

其他回答

第1个回答 2018-09-27

首先你的对象都没获取到，你把返回顶部的那个div class设成top, 而你获取方式却是 ElementById() 这个方法只能获取ID的，知道吧！
第二，你的页面内容不够，滚动条都无法出现，所以无法触发滚动事件。

第2个回答 2018-09-27

给你一段简单的
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<meta name="Description" content=""> <title>Document</title>
<style>
html,body{ height:2000px;width:100%;}
#myBtn{display:none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #666;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;}</style>
<script>
// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};

function scrollFunction() {console.log(121);
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}

// 点击按钮，返回顶部
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
<h1>这是顶部</h1>
中间是一连串的文字内容都在h1标签里
<h1>这是底部</h1>
</body></html>本回答被网友采纳

相似回答

这段js代码放到html中为什么不执行,请大神指点,本人菜鸟!答：因为你的hide1, hide2是局部变量, 所以在全局作用域内是访问不到的解决方案 A function NUMfc(num){...window.hide1 = ...window.hide2 = ...}B Hide = {}function NUMfc(num){...Hide[1] = ...Hide[2] = ...}if (Hide[1]){document...} ...

请问各位大佬,这段js代码用绝对定位做div的随机位置,但是打印出来随机位 ...答：document.write是不能放到事件函数中执行的，否则整个页面的文档流会被重新改写，这样你放在head中div{position: absolute;}就自动消失了，所以定位效果就无效了。你在浏览器控制台看一下就明白了（整个head段是空的）。应该直接操作dom对象来实现你的目的，即把 document.write(div);改为 document.body...

为什么我在js文件里面更改的代码,运行之后没有效果?答：你清除一下浏览器的缓存和COOKIES试一下。有可能缓存里面有，所以测试时还是调用未修改以前的脚本。

我尝试用JS获取复选框进行动作,为什么没有反应答：因为，你的代码是在窗口加载时执行的。这个时候，任何复选框都没有被选中。这段代码只会执行一次。当你点击选择复选框时，是什么都不会发生的。正确的方法是注册一个事件。即在你点击复选框时，需要触发一段代码。可以使用onclick属性：function checkit(elem){ alert(elem.checked);} 但比较推荐...

为什么有一段js代码一放到js文件里就不行了,这几段放在html里都能实现...答：首先，确保自己引入js的路径无误（注意，路径不要出现中文）第二，首先要确定引入的位置是否有误（通常在body最后引入）如果还不行，在最外层套一个window.onload试试

各位大神,下面的JS代码为什么没有出现提示报错的信息,反而是一片空白呢...答：报错原因是，你的代码要求的 throw new Error 可以用 alert。function factorial(x)//求阶乘{ if (x==0) { return 1; } var tt=0; tt = factorial(x-1)*x; return tt;}alert(factorial(9));

js问题,动态增加select里的option,求问为什么这段代码不执行?求大神...答：java 代码是后台执行 , 在前台是无法执行的 ,如果要从后台获取数据要使用ajax的方式在回调函数里面增加选项 function addOneOption(){$ajax({ url:url, success:function(data){ var optionlist = eval('(' +data + ')'); var selectObj=document.getElementById("user_d...