weixin_44701601
꧁逆心꧂
2019-06-13 10:53
采纳率: 28.6%
浏览 632

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • weixin_44701601
    ꧁逆心꧂ 2019-06-20 10:23
    已采纳
    这是鼠标滚动到一定位置显示返回顶端的代码
    <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);
            }
        }
    }
    
    点赞 评论
  • qq_23126581

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

    点赞 评论
  • weixin_43827462
    琞、小菜 2019-06-13 11:15

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

    点赞 评论
  • danruWang

    let topBtn

    点赞 评论
  • qq_38226759
    星曜纤尘 2019-06-14 00:05

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

    点赞 评论
  • cyj07
    青春不掉队 2019-06-14 15:29

    假设屏幕滚动到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的宽度的负值,用来开始不显示
    }

    点赞 评论

相关推荐