css中点击回到顶部

CSS点击回到顶部是一个非常方便的功能。当一个网页特别长的时候，用户阅读到底部时如果没有快速回到顶部的功能则会十分烦躁。使用CSS实现点击回到顶部可以让用户随时回到页面顶部，提高用户体验。

    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
    }
    .back-to-top.show {
      display: block;
      cursor: pointer;
    }

以上代码是回到顶部功能的CSS样式。其中，back-to-top是一个class名，代表回到顶部的元素；position: fixed使得回到顶部元素可以固定在底部；bottom和right是分别设置元素距离底部和右边的距离。display: none是为了在页面一开始时不显示回到顶部元素，只有在用户滚动到一定高度时才出现，这里用到的是show这个class。cursor: pointer是为了给回到顶部元素添加一个点击效果。

    var topBtn = $('.back-to-top');
    topBtn.click(function () {
        $('html,body').animate({
            scrollTop:0
        },500);
        return false;
    });

    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            topBtn.addClass('show');
        } else {
            topBtn.removeClass('show');
        }
    });

以上代码是回到顶部功能的JavaScript代码。首先获取回到顶部元素的class，并添加点击事件。点击事件中使用animate方法让页面平滑滚动到顶部，并设置滚动时间为500ms。然后阻止默认行为。接下来，使用$(window).scroll()方法来监听页面滚动事件，当滚动的高度大于200时，添加show这个class，回到顶部元素就会出现。

总的来说，实现点击回到顶部的功能并不难。只需要使用一些CSS样式和JavaScript代码即可。相信这个功能能够让用户在阅读长页面时更加方便和愉悦。