一直用的都是jquery,很少使用原生js发觉现在越来越依赖jquery了,恩恩,要改变一下了用原生来写效果
首先使用jquery编写返回顶部的效果,刚开始我是这样写的,利用jquery的scroll
代码
//随滚动条悬浮
$(window).scroll(function(){
var oTop=$(this).scrollTop()+300;
$(window).css({top:oTop});
//或者
$("div.float").stop().animate({top:oTop},"fast");
});
//原生随滚动条悬浮
window.οnlοad=function(){
var oDiv=document.getElementById("Div1");
window.οnscrοll=function(){
//document.body.scrollTop兼容Google,google不识别document.documentElement.scrollTop
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
//console.log(scrolltop);
//加上px才生效
oDiv.style.top=scrolltop+"px";
}
}
//返回顶部
$("div.top").click(function(){
//带有动画效果的返回顶部
$("html,body").animate({scrollTop:0});
//无任何动画效果的返回顶部
$("html,body").scrollTop(0);
});
//原生js返回顶部效果
document.getElementById("a4").οnclick=function(){
window.scrollTo(0,0);
}