美文网首页
网页自动滚动到最顶端

网页自动滚动到最顶端

作者: jeneen1129 | 来源:发表于2020-10-14 14:14 被阅读0次
    document.documentElement.scrollTop = 0
    

    回到顶部

    //html
    <img alt="Top_arrow" id="top_arrow" class="top_arrow" src="http://news.csdn.net//images/top_arrow.png"
            style="display: block; cursor: pointer;">
    // css 
    .top_arrow {
        border: 0 none;
        bottom: 100px;
        cursor: pointer;
        display: block;
        height: auto;
        margin: 0;
        opacity: 0.5;
        padding: 0;
        position: fixed;
        right: 80px;
        width: 35px;
        z-index: 2147483647;
    }
    
    //js
    //首先将#top_arrow隐藏
            $("#top_arrow").hide();
            $(function () {
                // scroll事件也可能在$(document)上面
                $('#info').scroll(function () {
                    if ($('#info').scrollTop() > 100) {
                        $("#top_arrow").fadeIn(400);
                    } else {
                        $("#top_arrow").fadeOut(400);
                    }
                });
                //当点击跳转链接后,回到页面顶部位置
                $("#top_arrow").click(function () {
                    $('#info').animate({
                        scrollTop: 0
                    }, 400);
                    return false;
                });
            });
    

    以上仅供学习,侵权请联系删除

    相关文章

      网友评论

          本文标题:网页自动滚动到最顶端

          本文链接:https://www.haomeiwen.com/subject/pdqwpktx.html