html页面载入完毕返回顶部,HTMl页面中返回顶部如何实现 HTMl页面中返回顶部实现代码...

本篇文章小编给大家分享一下HTMl页面中返回顶部实现代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

第一种:引用外部jQuery

新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果.

doc

$(function(){

for(var i =0 ;i <100;i++){

$("#article").append("

xxxxxxxxxx")

}

})

$(function(){

$(window).scroll(function(){ //只要窗口滚动,就触发下面代码

var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

if( scrollt >200 ){ //判断滚动后高度超过200px,就显示

$("#back_top").fadeIn(400); //淡入

}else{

$("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

}

});

$("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

$("html,body").animate({scrollTop:"0px"},200);

});

});

第二种:使用css及特殊图标进行设置

全代码打造简洁美观回到顶部按钮,同上,将代码复制进HTML文件中,打开即可看到效果.

doc

⌆

$(function(){

for(var i =0 ;i <100;i++){

$("#article").append("

xxxxxxxxxx")

}

})

$(function(){

$(window).scroll(function(){ //只要窗口滚动,就触发下面代码

var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

if( scrollt >200 ){ //判断滚动后高度超过200px,就显示

$("#back_top").fadeIn(400); //淡出

}else{

$("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动

}

});

$("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

$("html,body").animate({scrollTop:"0px"},200);

});

});