锚点定位及返回顶部

最新推荐文章于 2023-04-07 16:13:48 发布

weixin_39393337

最新推荐文章于 2023-04-07 16:13:48 发布

阅读量236

点赞数

分类专栏：记录文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_39393337/article/details/81481784

版权

记录专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery.1.9.1.min.js"></script>
</head>
<body>
<div class="header">
  <div class="header-width">
    <ul class="nav fr" >
      <li class="list list2">
        <a href="javascript:void(0)">头部</a>
      </li>
      <li class="list list2">
        <a href="javascript:void(0)" to="main-one">锚点1</a>
      </li>

      <li class="list list3">
        <a href="javascript:void(0)" to="main-two">锚点2</a>
      </li>
      <li class="list list4"">
        <a href="javascript:void(0)" to="main-three">锚点3</a>
      </li>
    </ul>
  </div>
  <div style="height: 800px" id="main-one">main-one</div>
  <div style="height: 800px" id="main-two">main-two</div>
  <div style="height: 1200px" id="main-three">main-three</div>
  <div class="gototop" style="position: fixed;right: 100px;bottom: 100px">返回顶部</div>
</div>
<script>
  $(function () {
    // 锚点定位
    $('.header .list a').click(function () {
      var id = $(this).attr('to');
      var top = $("#" + id).offset().top ;
      $("html, body").animate({
        scrollTop: top
      }, { duration: 500, easing: "swing" });
      return false;
    });

    // 滚动事件
    $(window).scroll(function(){
      var windowH= $(window).height();
      var scrollTop = $(window).scrollTop();
      // 导航栏
      if(scrollTop>300){
        $('.gototop').css("display","block");
      }else{$('.gototop').css("display","none");}

    });
    // 点击返回顶部
    $('.gototop').click(function () {
      $("html, body").animate({scrollTop: 0}, 500);
    });
  })
</script>
</body>
</html>