JQ实现简单的返回顶部功能

JQ实现简单的返回顶部功能

在日常的网站开发中,返回顶部是一个常用的功能.下边我用一些简单的案例来实现他

需求:在滚动超过一定距离后,出现返回顶部按钮,点击按钮,当前页面返回顶部
注意:返回顶部时,要流畅有一定的过渡效果.不能太生硬;

开发的时候,为了凸显效果 顺便做了一个简单的标题…

<div class="container">
        <div class="Nav_header">
            <ul>
                <li>
                    主菜单
                </li>
                <li>
                    今日新闻
                </li>
                <li>
                    明日新闻
                </li>
                <li>
                    新曲鉴赏
                </li>
                <li>
                    KMV展示
                </li>
            </ul>

        </div>
        <div class="top_btn">
            <span class="icon-ok">⬆</span>
            <span>返回顶部</span>
        </div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  padding: 0;
}

.container {
  width: 100%;
  background-color: #333333;
  padding-top: 50px;
  z-index: 9999;
}

.container .Nav_header {
  position: fixed;
  color: #fff;
  background-color: #666;
  font-size: 20px;
  top: 0;
  left: 100px;
}

.container .Nav_header ul li {
  display: inline-block;
  padding: 5px  10px;
  cursor: pointer;
}

.container .Nav_header ul li:hover {
  color: pink;
}

.container .Nav_header ul li::after {
  content: "|";
  color: #ccc;
  margin-left: 18px;
  height: 5px;
  overflow: hidden;
}

.container .Nav_header ul li:last-child::after {
  content: "";
  margin-left: 0;
}

.container .top_btn {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 100px;
  color: #181bce;
  background-color: #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.container .top_btn span {
  padding: 10px 5px;
}

.container .top_btn span:last-child {
  padding-left: 0;
}

.container .item {
  height: 1000px;
  width: 100%;
  background-color: turquoise;
}

.container .item:nth-child(2n) {
  background-color: palevioletred;
}

逻辑部分

$(function () {
    function goTop(){
    var $navBar = $(".container");

    // window.scroll  滚动监听  为了显示隐藏 返回按钮
    $(window).scroll(function () {
        //写在函数内部一直滚动监听 写在外部时,由于js读取是从上往下执行的 .先获取当前的滚动高度为0,再执行滚动监听的
        // 获取滚动的高度 浏览器兼容
        let $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.html.scrollTop;
        if ($scrollTop > 50) {
            $navBar.find(".top_btn").show();
        } else {
            $navBar.find('.top_btn').hide();
        } 
    });


    // 返回事件
    $navBar.find(".top_btn").on("click", function () {
        // $('html,body').animate({scrollTop: '0'}, 500);   
        $("html,body").animate({
            scrollTop:0
        });
    });
}

goTop();
})