求大神帮我看看以下这段js代码为什么没实现我想要的效果，我是个菜鸟，自学网页制作才一个月都不太懂 50
我想要实现一个返回顶部的效果，并且是滚动条滑动一小段才会出现返回顶部的按钮下面的代码在webstorm里实现不了这个效果，求专业人士解答<body><divclass="...
我想要实现一个返回顶部的效果，并且是滚动条滑动一小段才会出现返回顶部的按钮
下面的代码在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>部分已经设置好了 ，太长了这里面放不下了 展开
下面的代码在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>部分已经设置好了 ，太长了这里面放不下了 展开
2个回答
展开全部
首先你的对象都没获取到， 你把 返回顶部的那个div class设成top, 而你获取方式却是 ElementById() 这个方法只能获取ID的， 知道吧！
第二， 你的页面内容不够， 滚动条都无法出现， 所以无法触发滚动事件。
第二， 你的页面内容不够， 滚动条都无法出现， 所以无法触发滚动事件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你一段简单的
<!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>
<!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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
