实现页面div的返回顶部操作

实现页面div的返回顶部操作
当然可以使用jquery

$(".btn1").click(function(){
  $("div").scrollLeft(100);
});

image.png

<ul class="layui-fixbar">
        <li class="layui-icon layui-fixbar-top" lay-type="top" style="display: list-item;">�</li>
    </ul>

<style>
    /* 这段样式只是用于演示 */
    .layui-fixbar {
        position: fixed;
        right: 30px;
        bottom: 65px;
        z-index: 999999;
    }

    .layui-fixbar .layui-fixbar-top {
        display: none;
        font-size: 30px;
    }

    .layui-fixbar li {
         30px;
        height: 30px;
        line-height: 30px;
        margin-bottom: 1px;
        text-align: center;
        cursor: pointer;
        font-size: 20px;
        background-color: #9F9F9F;
        color: #fff;
        border-radius: 2px;
        opacity: .95;
    }
</style>

var scroll = function () {
            var stop = $('#COM_app_body').scrollTop();
            if (stop >= 200) {
                $('.layui-fixbar-top').show()
            } else {
                $('.layui-fixbar-top').hide()
            }
        };
        //Top显示控制
        var timer;
        $('#COM_app_body').on('scroll', function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                scroll();
            }, 100);
        });
        scroll();

        $('.layui-fixbar').find('li').on('click', function () {
            var othis = $(this), type = othis.attr('lay-type');
            if (type === 'top') {
                $('#COM_app_body').animate({
                    scrollTop: 0
                }, 200);
            }
        });

对应的你可以改成html,.body 和document

原文地址:https://www.cnblogs.com/snmic/p/10341030.html