准备

说明：

参考腾讯云服务首页（利用html页面定位到指定位置）
需要实现的效果
div内容用图片替代，背景图片准备dummyimage（一个很好的生成指定图片尺寸颜色的网站）

代码

<!DOCTYPE html><html><head><meta charset="utf-8"></head><style>*{margin: 0; }html,body{width: 100%;height: 100%;}.div1{width:100%;height: 100%;background: url(00e6ff.png);background-size: cover;text-align: center;}.div2{width:100%;height: 100%;background: url(5500ff.png);background-size: cover;}.div3{width:100%;height: 100%;background: url(fff700.png);background-size: cover;}</style><body><section class="div1"><button onclick="goTo3();">跳转到第三张</button></section><section class="div2"></section><section id="three" class="div3"></section><section class="div2"></section></body><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script type="text/javascript">function goTo3() {$("html,body").animate({scrollTop: $("#three").offset().top}, 500);//定位到《静夜思》}</script></html>

记得把图片替换一下哦

原理

css动画跳转到指定位置
div 铺满整个屏幕，背景图片自适应

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起