pc端 jQuery实现回到顶部

2020-02-24 本文已影响0人八妹sss

场景：当页面滚动距离大于等于浏览器窗口两倍时出现回到顶部按钮

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./images/favicon.ico" />
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <title>教学展厅</title>
</head>

<body>
  <div class="main">
    <header class="view">
      <div class="layout">
        <div class="logo">
          <img src="./images/img_index_logo1@2x.png" alt="">
        </div>
        <div class="navbar">
          <ul class="navbar-list">
            <li class="navbar-item">
              <a href="./home.html">走进惠萌</a>
              <ul class="navbar-menu">
                <li class="navbar-menu-item">
                  <a href="./brandStory.html">品牌故事</a>
                </li>
                <li class="navbar-menu-item">
                  <a href="./developmentCourse.html">发展历程</a>
                </li>
                <li class="navbar-menu-item">
                  <a href="./companyCulture.html">企业文化</a>
                </li>
                <li class="navbar-menu-item">
                  <a href="./teacherTeam.html">教研团队</a>
                </li>
              </ul>
            </li>
            <li class="navbar-item">
              <a href="./companyNews.html">新闻动态</a>
            </li>
            <li class="navbar-item active">
              <a>教学展厅</a>
            </li>
            <li class="navbar-item">
              <a href="./campusTour.html">校园巡礼</a>
            </li>
            <li class="navbar-item">
              <a href="./careerOpportunity.html">事业机会</a>
            </li>
            <li class="navbar-item">
              <a href="./contactUs.html">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <div class="default-content">
      <div class="layout">
        <div class="cont">
          <div class="building">
            <p class="text">内容正在建设中哟~</p>
          </div>
          
        </div>
      </div>
    </div>
    <!--回到顶部的按钮-->
    <div id="gotop"></div>

    <footer>
      <div class="layout">
        <div class="cont">
          <div class="cont-left">
            <p class="logo"></p>
            <p class="text"><span>&copy;2019惠萌教育集团（上海）有限公司版权所有</span><span>沪ICP备09079966号-1</span></p>
          </div>
          <div class="cont-right">
            <div class="qr-item">
              <p class="qr">
                <img src="./images/img_footer_code_kindergarten@2x.png" />
              </p>
              <p class="name">惠萌托育园</p>
            </div>
            <div class="qr-item">
              <p class="qr">
                <img src="./images/img_footer_code_wechat@2x.png" />
              </p>
              <p class="name">惠萌教育官方微信</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <script src="./js/jquery-3.4.1.min.js"></script>
</body>

</html>

javascript

$(function () {
  $(window).scroll(function () {
    // 浏览器窗口大小
    windowHeight = document.body.clientHeight&&document.documentElement.clientHeight;
    if ($(window).scrollTop() >=windowHeight*2) {
      $("#gotop").fadeIn(500);
    }
    else {
      $("#gotop").fadeOut(500);
    }
  });
  $("#gotop").click(function () {
    $('body,html').animate({scrollTop: 0}, 200);
    return false;
  });
})

css

* {
  font-family: 'PingFangSC-Regular', 'Microsoft Yahei';
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
a{
  text-decoration: none;
}
.main {
  width: 100%;
  min-width: 1440px;
  min-height: 100vh;
  background: #fff;
  padding-top: 80px;
  padding-bottom: 314px;
  position: relative;
}

.layout {
  width: 1440px;
  height: 100%;
  margin: 0 auto;
}
/* 头部*/
header {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 999;
  user-select: none;
}

header .layout {
  display: flex;
  justify-content: space-between;
}

.logo img {
  width: 100%;
  height: 100%;
}

.navbar-list {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.navbar-item {
  width: 126px;
  height: 100%;
  text-align: center;
  line-height: 48px;
  font-size: 18px;
  font-family: 'PingFangSC-Medium';
  color: #fbfbfb;
  padding-bottom: 4px;
  margin-right: 17px;
  opacity: 0.7;
  cursor: pointer;
}

.navbar-item.active {
  font-size: 20px;
  color: #fbfbfb;
  opacity: 1;
  position: relative;
}

.navbar-item.active::after {
  content: '';
  width: 72px;
  height: 2px;
  background: #fbfbfb;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translate(-50%, 0);
}

.navbar-item:hover {
  color: #fbfbfb;
  opacity: 1;
  position: relative;
}

.navbar-menu {
  width: 100%;
  position: absolute;
  top: 52px;
  left: 0;
  padding-top: 10px;
  display: none;
}

.navbar-item:hover .navbar-menu {
  display: block;
}

.navbar-menu-item {
  width: 100%;
  height: 48px;
  background: #fbfbfb;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
}
.navbar-menu-item>a{
  color: #333;
}

.navbar-menu-item.active {
  background: #FFE5D0;
}
.navbar-menu-item:hover >a, .navbar-menu-item.active>a{
  color: #FF7100;
}
.view {
  background: #fff;
}

.view .logo {
  width: 232px;
  height: 48px;
  margin-top: 16px;
  transition: 0.2s all ease-in;
}

.view .navbar {
  height: 100%;
  background: #fff;
  margin: 0;
  border-radius: 0;
  transition: 0.2s all ease-in;
}

.view .navbar-item {
  line-height: 52px;
  padding: 14px 0;
}
.view .navbar-item>a{
  color: #333;
}

.view .navbar-item.active>a {
  color: #FF7100;
}

.view .navbar-item:hover>a {
  color: #FF7100;
}

.view .navbar-item.active:hover>a {
  color: #FF7100;
}

.view .navbar-item.active::after {
  content: '';
  width: 72px;
  height: 4px;
  background: #FF7100;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 2px;
}

.view .navbar-menu {
  top: 80px;
  padding: 0;
}

/* 底部 */
footer {
  width: 100%;
  height: 314px;
  background: #1C233D;
  position: absolute;
  left: 0;
  bottom: 0;
}

footer .layout {
  padding-top: 99px;
}

footer .cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

footer .cont-left {
  padding-top: 16px;
}

footer .cont-left .logo {
  width: 170px;
  height: 30px;
  background: url('../images/img_footer_logo@2x.png') no-repeat center/100%;
  margin-bottom: 34px;
}

footer .cont-left .text {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-family: 'PingFangSC-Regular';
  color: #fbfbfb;
}

footer .cont-left .text span:first-of-type {
  margin-right: 12px;
}

footer .cont-right .qr-item {
  width: 96px;
  margin-right: 60px;
}

footer .cont-right .qr-item:last-of-type {
  margin: 0;
}

footer .cont-right {
  display: flex;
}

footer .cont-right .qr-item .qr {
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 2px;
  padding: 4px;
  margin-bottom: 8px;
}

footer .cont-right .qr-item .qr img {
  display: block;
  width: 100%;
}

footer .cont-right .qr-item .name {
  width: 96px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  font-size: 12px;
  font-family: 'PingFangSC-Regular';
  color: #fbfbfb;
}

/* banner */
.banner {
  height: 800px;
  background: url('../images/img_career_opportunity@2x.jpg') no-repeat top center;
  background-size: cover;
  position: relative;
}

.banner .layout {
  padding-top: 310px;
}

.banner .title {
  height: 44px;
  text-align: center;
  line-height: 44px;
  font-size: 44px;
  font-family: 'PingFangSC-Regular';
  color: #fff;
}

.banner .subtitle {
  height: 92px;
  text-align: center;
  line-height: 92px;
  font-size: 92px;
  font-family: 'PingFangSC-Light';
  color: #fff;
  margin-top: 20px;
}

/*更多*/
.learn-more {
  width: 100%;
  height: 473px;
  background: url('../images/bg_more@2x.png') no-repeat top center;
  background-size: cover;
}

.learn-more .layout {
  padding-top: 114px;
}

.learn-more .cont {
  width: 100%;
}

.learn-more .cont .title {
  height: 44px;
  text-align: center;
  line-height: 44px;
  font-size: 44px;
  font-family: 'PingFangSC-Medium';
  color: #fff;
  margin-bottom: 28px;
}

.learn-more .cont .title span:nth-of-type(2) {
  font-size: 24px;
  vertical-align: text-bottom;
}

.learn-more .cont .subtitle {
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 24px;
  color: #fff;
  margin-top: 28px;
}

.learn-more .cont .btn {
  width: 180px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: 20px;
  color: #fff;
  margin: 72px auto 0;
  user-select: none;
}
.learn-more .cont .btn:hover{
  background: #fff;
  color: #1C233D;
}
/* 回到顶部 */
#gotop {
  width: 40px;
  height: 40px;
  background: url('../images/icon_top_nor@2x.png') no-repeat center / 100%;
  position: fixed;
  bottom: 160px;
  right: 0;
  z-index: 999;
  display: none;
  cursor: pointer;
}
#gotop:hover{
  background-image: url('../images/icon_top_hover@2x.png');
}
/*缺省内容*/
.default-content{
  width: 100%;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0);
}
.default-content .layout{
  height: 100%;
}
.default-content .cont{
  width: 100%;
}
.default-content .building{
  width: 268px;
  height: 212px;
  background: url('../images/defult_building@2x.png') no-repeat center / 100%;
  margin: 0 auto;
  padding-top: 192px;
}
.default-content .text{
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  font-family: 'PingFangSC-Regular';
  color: #999;
}

pc端 jQuery实现回到顶部

场景：当页面滚动距离大于等于浏览器窗口两倍时出现回到顶部按钮

html

javascript

css

猜你喜欢

热点阅读

pc端 jQuery实现 回到顶部

场景：当页面滚动距离大于等于浏览器窗口两倍时出现回到顶部按钮

html

javascript

css

猜你喜欢

热点阅读

pc端 jQuery实现回到顶部