jquery实现的动态回到顶部特效代码

更新时间：2026-03-29 01:07:20作者：yezheng

本文实例讲述了jquery实现的动态回到顶部特效代码。分享给大家供大家参考，具体如下：

这款jquery动态回到顶部特效，不是一下子就回到了网页顶部，而是带点缓冲的效果，有动画效果，使用了jQuery插件，这是个非常常用的网页特效，希望大家喜欢哦。

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery动态回到顶部特效</title>

</head>

<body>

<style>

#goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none;

background:url(images/back_to_top_white.gif);}

</style>

<br/>

<p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">***，how are you。

<br/>

$(window).scroll(function(){

var sc=$(window).scrollTop();

var rwidth=$(window).width()

if(sc>0){

$("#goTopBtn").css("display","block");

$("#goTopBtn").css("left",(rwidth-36)+"px")

}else{

$("#goTopBtn").css("display","none");

}

})

$("#goTopBtn").click(function(){

var sc=$(window).scrollTop();

$('body,html').animate({scrollTop:0},500);

})

</script>

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。