使用jQuery实现滚动返回顶部,返回底部动态效果

发布时间:2020-03-08 00:36:49 作者:筱航科技 来源:本站 浏览量(109) 点赞(39)
摘要:百度 HTTPS 认证网站验证失败怎么处理?-长春网站制作【筱航科技】使用jQuery来轻松实现返回顶部,返回底部效果,适用网站,绝大多数网站因为是jQuery的js代码,所以头部要先引用jQuery文件,然后再操作添加这些图标,图标使用的是font swesome插件,可以通过官网下载或者引用百度CDN文件把HTML放在公共底部部分中,进行全局

使用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 - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城

二维码

扫一扫,关注我们

声明:本文由【筱航科技】编辑上传发布,转载此文章须经作者同意,并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

筱航科技-您身边的网站建设专家

搜索千万次不如咨询1次

主营项目:网站建设,网络营销,SEO优化,微信小程序开发,LOGO设计,产品包装设计,虚拟主机,域名注册,网站安全检测,微信商城等

立即咨询 184-4312-4181
在线客服
点此联系在线客服!