錨點定位及返回頂部

<!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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章