两种方式实现页末置顶图片兼容ie,firefox,google

最新推荐文章于 2024-04-20 11:07:13 发布

kingisking1

最新推荐文章于 2024-04-20 11:07:13 发布

阅读量780

点赞数

分类专栏： javascript 文章标签： ie firefox function scroll safari chrome

本文链接：https://blog.csdn.net/kingisking1/article/details/7553559

版权

javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了两种实现页末置顶图片的方法，兼容IE、Firefox、Chrome等浏览器。第一种方法使用纯JavaScript，通过监听滚动事件并设置定时器平滑滚动回顶部。第二种方法利用jQuery，同样实现点击回到顶部功能，并在窗口缩放时调整图片位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式1：纯js实现

1 Css文件中设置btn样式

#goTopBtn {
POSITION: fixed; LINE-HEIGHT: 70px; WIDTH: 70px; BOTTOM: 35px; HEIGHT: 70px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}

2 scrolltop.js

// JavaScript Document 兼容各浏览器
function goTopEx(){
var obj=document.getElementById("goTopBtn");

//获取页面scrollTop

function getScrollTop(){
//return document.documentElement.scrollTop;

//ff / chrome safari / ie 浏览器兼容
return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

}

        //设置页面scrollTop
        function setScrollTop(value){
            // document.documentElement.scrollTop=value;

           //ff / chrome safari / ie 浏览器兼容
            (/(chrome|version)/i).test(navigator.userAgent) ? document.body.scrollTop = value : document.documentElement ? document.documentElement.scrollTop = value : document.body.scrollTop = value;
            }
        window.οnscrοll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
        obj.οnclick=function(){
            var goTop=setInterval(scrollMove,10);
            function scrollMove(){
                    setScrollTop(getScrollTop()/1.1);
                    if(getScrollTop()<1)clearInterval(goTop);
                }
        }
    }

3html文件中

<DIV style="DISPLAY: none" id="goTopBtn"><IMG border=0 src="img/down.png"/></DIV>
<SCRIPT type="text/javascript"> goTopEx();</SCRIPT>

方式二：jQuery实现

1 css文件中加入样式

.scroll{
background:url(../img/down.png) no-repeat center top transparent;
bottom:50px;
cursor:pointer;
height:70px;
width:70px;
position:fixed;
_position:absolute; /*兼容IE6*/
_top: expression(eval(document.documentElement.scrollTop)+700); /*700为图片距离顶部的设定距离，可以修改。不加700则图片紧贴在顶部滚动*/
}
html{_text-overflow:ellipsis;} /*解决IE6下图片抖动*/

2 top.js文件

$(document).ready(function () {
    var show_delay;
    var scroll_left = parseInt((document.body.offsetWidth - 960) / 2) + 961; //960为页面宽度
    $(".scroll").click(function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
    });
    $(window).resize(function () {
        scroll_left = parseInt((document.body.offsetWidth - 960) / 2) + 961;
        $(".scroll").css("left", scroll_left);
    });
    reshow(scroll_left, show_delay);
});
function reshow(marign_l, show_d) {
    $(".scroll").css("left", marign_l);
    if ((document.documentElement.scrollTop + document.body.scrollTop) != 0) {
        $(".scroll").css("display", "block");
    }
    else {
        $(".scroll").css("display", "none");
    }
    if (show_d) window.clearTimeout(show_d);
    show_d = setTimeout("reshow()", 500);
}

3 html