jQuery经典demo

返回顶部

 $(function () {
            // 需求：点击按钮，实现返回顶部效果
            $('button').click(function () {
                //  $('body,html')  选择器固定写法，否则实现不了
                //  scrollTop 作为 animate 的参数
                $('body,html').stop().animate({ scrollTop : 0 },800)
            })
        })

楼层跳转

  $('input').click(function () {
                $('body,html').stop().animate({ scrollTop : $('.box03').offset().top },400)
            })

固定导航的显示和隐藏

   $(function () {

            var floor2 = $('.box02').offset().top;
            // alert(floor2)

        //    当页面滚动到一定距离的时候，显示固定的盒子
            $(window).scroll(function () {
                // console.log(11)
                // console.log( $(window).scrollTop() )   // 获取页面滚动出去的距离
                if( $('html,body').scrollTop() >= floor2 ){
                    $('.fixed-header').show()
                }else{
                    $('.fixed-header').hide()
                }
            })
        })