11
来源：2-2 JS-浏览器兼容性
期限_
2021-05-08 18:25:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="demo-css/base.css" />
<link rel="stylesheet" type="text/css" href="demo-css/icons.css" />
<link rel="stylesheet" type="text/css" href="demo-css/index.css" />
<style type="text/css">
.backtop {
position: fixed;
/*20px*/
right: 0.5rem;
/*120px*/
bottom: 3.0rem;
width: 3.0rem;
height: 3.0rem;
line-height: 3.0rem;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
border: none;
outline: none;
color: #fff;
font-size: 16px;
}
[data-dpr="2"] .backtop {
font-size: 32px;
}
[data-dpr="3"] .backtop {
font-size: 48px;
}
</style>
<script src="flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:1337/vorlon.js"></script>
</head>
<body>
<header class="header-container">
<div class="navbar">
<div class="navbar-left">
<i class="iconfont icon-scan"></i>
</div>
<div class="navbar-center">
<div class="searchBox">
<div class="searchBox-prepend">
<i class="iconfont icon-search"></i>
</div>
<input type="text" class="searchBox-input" placeholder="嘿嘿嘿嘿">
<div class="searchBox-append">
<i class="iconfont icon-close"></i>
</div>
</div>
</div>
<div class="navbar-right">
<i class="iconfont icon-msg"></i>
</div>
</div>
</header>
<div class="main-container">
<div class="slider-container">
<img src="imges/slider/1.jpg">
</div>
<nav class="nav-container">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<img src="imges/nav/1.png" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
</ul>
</nav>
<div class="recommend-container">
<ul class="recommend">
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadas</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-link">
<p class="recommend-pic">
<img src="imges/recommend/1.jpg" alt="" class="recommend-img">
</p>
<p class="recommend-name">sadasd</p>
<p class="recommend-origPrice">2000.0</p>
<p class="recommend-info">
<span class="recommend-price">￥2300</span>
<span class="recommend-count">66件已售</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="footer-container">
<ul class="footer">
<li class="footer-item">
<a href="" class="footer-link footer-item-active">
<i class="iconfont icon-shop footer-img "></i>
<span class="footer-text">首页</span>
</a>
</li>
<li class="footer-item">
<a href="" class="footer-link">
<i class="iconfont icon-shop footer-img"></i>
<span class="footer-text">首页</span>
</a>
</li>
<li class="footer-item">
<a href="" class="footer-link ">
<i class="iconfont icon-shop footer-img"></i>
<span class="footer-text">首页</span>
</a>
</li>
<li class="footer-item">
<a href="" class="footer-link">
<i class="iconfont icon-shop footer-img"></i>
<span class="footer-text">首页</span>
</a>
</li>
</ul>
</div>
<button class="backtop" id="backtop">顶部</button>
<script type="text/javascript">
var backtopEl = document.getElementById('backtop');
backtopEl.addEventListener('click', function() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}, false);
</script>
</body>
</html>
问题描述：
为什么返回顶部不显示？
1回答
-
好帮手慕久久
2021-05-08
同学你好，老师测试你的代码，在浏览器和手机上，返回顶部按钮都能正常显示：
并且返回顶部功能是对的：
建议同学检查一下代码是否保存了、代码所在的文件与效果对应的文件是否是同一个，然后ctrl+F5强制刷新一下页面看看，或者换个浏览器试试；如果还是不行，建议把index.css代码也粘贴出来，老师帮你检查一下。
祝学习愉快！
0
相似问题
回答 1