怎么实现回到底部
来源：2-2 真机查看
慕仰8079247
2020-02-08 21:58:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端商城</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/index.css">
<style>
.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="js/flexible.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" placeholder="开学季有礼，好货5折起" class="searchBox-input">
<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="img/slider/1.jpg" alt="slider"> </div>
<navclass="nav-container">
<ul class="nav">
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/1.png" alt="nav" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/2.png" alt="nav" class="nav-img">
<span class="nav-text">一元购</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/3.png" alt="nav" class="nav-img">
<span class="nav-text">优惠券</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/4.png" alt="nav" class="nav-img">
<span class="nav-text">教育</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/5.png" alt="nav" class="nav-img">
<span class="nav-text">旅行</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/6.png" alt="nav" class="nav-img">
<span class="nav-text">在线订餐</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/7.png" alt="nav" class="nav-img">
<span class="nav-text">庆典</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/8.png" alt="nav" class="nav-img">
<span class="nav-text">秒杀</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/9.png" alt="nav" class="nav-img">
<span class="nav-text">拍卖</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/10.png" alt="nav" 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="img/recommend/1.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">欧派整体橱柜定制简约现代</p>
<p class="recommend-origPrice">
<del>¥2000.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span>
<span class="recommend-count">985件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/2.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">创维55吋4K超高清HDR</p>
<p class="recommend-origPrice">
<del>¥2999.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">2299</strong></span>
<span class="recommend-count">63件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/3.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">【到手259元】苏泊尔 5L电压力锅</p>
<p class="recomme nd-origPrice">
<del>¥799.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">299</strong></span>
<span class="recommend-count">1908件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/4.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">三只松鼠坚果礼包</p>
<p class="recommend-origPrice">
<del>¥125.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span>
<span class="recommend-count">9532件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/5.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">蓝月亮洗衣液12斤</p>
<p class="recommend-origPrice">
<del>¥133.40</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
<span class="recommend-count">5399件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/6.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">福临门葵花玉米油</p>
<p class="recommend-origPrice">
<del>¥109.90</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
<span class="recommend-count">6294件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/7.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">TP-LINK 全千兆端口双频无线路由器</p>
<p class="recommend-origPrice">
<del>¥179.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">169</strong></span>
<span class="recommend-count">4255件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/8.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">【前1800名再减50】家用高压洗车机</p>
<p class="recommend-origPrice">
<del>¥790.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">268</strong></span>
<span class="recommend-count">1599件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/9.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">德国鲁茜rusch迷你婴儿辅食机 宝宝</p>
<p class="recommend-origPrice">
<del>¥898.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">159</strong></span>
<span class="recommend-count">881件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/10.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">西域之尚红枣500g*5袋</p>
<p class="recommend-origPrice">
<del>¥89.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">29.9</strong></span>
<span class="recommend-count">15049件已售</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="tabbar-container">
<ul class="tabbar">
<li class="tabbar-item tabbar-item-active">
<a href="###" class="tabbar-link">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-category"></i>
<span>分类页</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-personal"></i>
<span>个人中心</span>
</a>
</li>
</ul>
</div>
<button id="backtop" class="backtop">顶部</button>
<script>
var backtopEl = document.getElementById('backtop');
backtopEl.addEventListener('click', function() {
document.documentElement.scrollBottom= 0;
// document.body.scrollTop = 0;
}, false);
</script>
</body>
</html>
1回答
-
好帮手慕码
2020-02-09
同学你好，请问同学想实现的功能是返回顶部对吗？由于同学的代码不全，无法测试，这里给出实现例子。可以使用jQuery中的动画animate方法实现：
同学可以下去结合示例理解一下， 然后灵活运用， 实现自己想要的效果
如果我的回答帮助到了你， 欢迎采纳，祝学习愉快~~~
0
相似问题