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

网页自动滚动到最顶端

作者: 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