鼠标滚动到一定程度,返回顶端的按钮图标显示,图依次显示

图片说明刚进入页面是不显示文字,然后从右边依次显示出来
图片说明当我滚动到这张图片的位置的时候这些蓝色图标依次显示,
图片说明怎么设置滚动到一定程度右边的浮动会显示出来

这是鼠标滚动到一定位置显示返回顶端的代码
<script>
        window.onscroll = function () { 
        if (document.documentElement.scrollTop + document.body.scrollTop > 100)/*鼠标滚动距离*/ { 
        document.getElementById("Right_float").style.display = "block"; /*大于显示*/
        } 
        else { 
        document.getElementById("Right_float").style.display = "none"; /*小于隐藏*/
        } 
        } 
    </script>
这是鼠标滑动到最底端,按返回按钮可滚动会最顶端,
var goto_top_type = -1;
var goto_top_itv = 0;

function goto_top_timer() {
    var y = goto_top_type == 1 ? document.documentElement.scrollTop
            : document.body.scrollTop;
    var moveby = 15;
    y -= Math.ceil(y * moveby / 100);
    if (y < 0) {
        y = 0;
    }
    if (goto_top_type == 1) {
        document.documentElement.scrollTop = y;
    } else {
        document.body.scrollTop = y;
    }
    if (y == 0) {
        clearInterval(goto_top_itv);
        goto_top_itv = 0;
    }
}

function goto_top() {
    if (goto_top_itv == 0) {
        if (document.documentElement && document.documentElement.scrollTop) {
            goto_top_type = 1;
        } else if (document.body && document.body.scrollTop) {
            goto_top_type = 2;
        } else {
            goto_top_type = 0;
        }
        if (goto_top_type > 0) {
            goto_top_itv = setInterval('goto_top_timer()', 50);
        }
    }
}

这个浮动图标可以设置百分比位置。无论滚动条怎么滚,他都在屏幕中央。

document.documentElement.scrollTop 可以通过这个获取到滚动条的位置,然后你可以设置当scrollTop等于多少的时候显示就好了,但是这个方法有兼容问题,如有需要可以查阅https://blog.csdn.net/weixin_43827462/article/details/91414096

可以用js(jq)判断滚动条的长度

假设屏幕滚动到50的距离后,显示返回顶部,首先获取当前滚动距离上面的距离,然后判断大于等于50后,显示:
var top = document.documentElement.scrollTop;
if (top >= 50) {
$(返回顶部dom).show();
} else {
$(返回顶部dom).hide();
}
图片或文字依次滚动这个,你可以用css3的animation,或者jq的animate方法,同样需要先判断当前滚动的位置,假设位置到了图片或文字需要滚动显示的位置后,给这个添加一个有动画的class,或者给dom绑定jq的animate,然后添加标识就行,如:
var imgTop = $(img).offset().top;
var top = document.documentElement.scrollTop;
if (top >= imgTop && !$(img).hasClass("animate-ok")) { //animate-ok是标识是否已经有过动画
$(img).animate({margin-left: 0}); //首先需要设置img块的margin-left为img的宽度的负值,用来开始不显示
}