jquery 上下滚动

当今网页开发中，上下滚动效果已经成为了一种常见的网页设计元素。利用jQuery框架，我们可以轻松地实现一个流畅且美观的上下滚动效果。

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 200) {
            $('.scroll-top').fadeIn();
        } else {
            $('.scroll-top').fadeOut();
        }
    });
    $('.scroll-top').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

代码中，我们首先通过document对象的ready()方法，等待页面中所有的DOM节点都被加载完毕后，再执行具体的函数。

接着，我们使用jQuery的scroll()方法，监控整个页面的滚动事件。当滚动高度超过200像素时，我们会让一个id为scroll-top的html元素逐渐浮现在页面中。反之，若滚动高度小于200，我们则让该元素逐渐消失不见。

最后，我们通过click()方法监听页面中id为scroll-top的html元素的点击事件。当元素被点击时，我们使用animate()方法将当前页面滚动到最顶端（scrollTop：0），并且动画持续时间为0.6秒。同时，return false会防止用户双击该元素导致回到了页面顶端，从而影响用户体验。

通过上面的代码，我们可以在页面中轻松地实现一个上下滚动效果，为用户提供更加完美的浏览体验。