使用jQuery来轻松实现返回顶部，返回底部效果，适用网站，绝大多数网站

因为是jQuery的js代码，所以头部要先引用jQuery文件，然后再操作添加这些图标，图标使用的是font swesome插件，可以通过官网下载或者引用百度CDN文件

把HTML放在公共底部部分中，进行全局调用！

长春网站制作【筱航科技】

<div class="qq-div" id="toqq">
  <i class="fa fa-qq" aria-hidden="true"></i>
</div>
<div class="totop-div" id="totop">
  <i class="fa fa-chevron-up" aria-hidden="true"></i>
</div>
<div class="bottom-div" id="tobottom">
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>

css部分代码，设置默认样式，鼠标悬浮样式等

<style>
body {
    position: relative;
}
.totop-div,
.bottom-div,
.qq-div {
  width: 40px;
  height: 40px;
  line-height: 36px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 2px;
  font-size: 24px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
.totop-div {
  position: fixed;
  right: 10px;
  bottom: 65px;
}
.bottom-div {
  position: fixed;
  right: 10px;
  bottom: 20px;
}
.qq-div {
  position: fixed;
  right: 10px;
  bottom: 110px;
}
.totop-div:after,
.bottom-div:after,
.qq-div:after {
  position: absolute;
  right: 45px;
  top: 50%;
  margin-top: -12px;
  min-width: 60px;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 12px;
  text-align: center;
  display: none;
  transition: all .5s;
}
.totop-div:after {
  content: "返回顶部";
  transition: all .5s;
}
.bottom-div:after {
  content: "返回底部";
  transition: all .5s;
}
.qq-div:after {
  content: "建站咨询";
  transition: all .5s;
}
.totop-div:hover,
.bottom-div:hover,
.qq-div:hover {
  background: rgba(0, 0, 0, 0.5);
  transition: all .5s;
}
.totop-div:hover:after,
.bottom-div:hover:after,
.qq-div:hover:after {
  display: block;
}
</style>

js部分代码

/*返回顶部*/
$("#totop").click(function(){
  $('html,body').stop();
  $("body,html").animate({scrollTop:0},1000);
})
/*返回底部*/
$('#tobottom').click(function(){
  $('html,body').stop();
  $('html,body').animate({ scrollTop:$('#footer').offset().top},1000);
});

筱航科技主营业务： 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城