我的回到顶部浮动按钮在IE和火狐下都能正常使用,但是在chrome下就不行,不显示请问怎么解决,我不会JS

JavaScript027

我的回到顶部浮动按钮在IE和火狐下都能正常使用,但是在chrome下就不行,不显示请问怎么解决,我不会JS,第1张

这个是chrome对document.documentElement.scrollTop的支持有点怪异导致的。

你可以把你的getScrollTop()和 setScrollTop()函数改为下面的:

function getScrollTop(){

return document.documentElement.scrollTop+document.body.scrollTop

}

function setScrollTop(value){

if (!document.documentElement.scrollTop){

document.body.scrollTop = value

}

else {

document.documentElement.scrollTop=value

}

}

同时,你的外层的goTopEx函数的写法和调用办法不够好,我为了做测试,在外边加了闭包。

你看一下下面的完整代码:

(function goTopEx(){

var obj=document.getElementById("goTopBtn")

function getScrollTop(){

return document.documentElement.scrollTop+document.body.scrollTop

}

function setScrollTop(value){

if (!document.documentElement.scrollTop){

document.body.scrollTop = value

}

else {

document.documentElement.scrollTop=value

}

}

window.onscroll=function(){

getScrollTop()>0?obj.style.display="":obj.style.display="none"

}

obj.onclick=function(){

var goTop=setInterval(scrollMove,10)

function scrollMove(){

setScrollTop(getScrollTop()/1.1)

if(getScrollTop()<1)clearInterval(goTop)

}

}

})()上面的完整代码,我本地测试已通过。

这个简单,不用js也可以做出来,右边那块用个绝对定位层,只需给那个层设定几个css属性即可,position:fixedtop:600pxleft:1000pxwidth:200pxheight:400px

再在这个层里面放个div或者img标签,用图片或背景填充起来,然后用a标签把div或img标签包裹起来,最重要的是a标签的href属性,要设置成你想要跳转的地方的某个元素的name属性值或者id属性值。如顶部页面有一个div标签有这两个属性,name="pic1" id="pic2",你下面的那个a标签的href属性设置成pic1或pic2都行。如果你还想鼠标放上去有点动态效果,如换张图片,这个效果可以用css做出来,也可以用js做出来