Dynamic return to top special effects code implemented by jquery

Dynamic return to top special effects code implemented by jquery_jquery

WBOY

Release： 2016-05-16 15:34:54

Original

1570 people have browsed it

The example in this article describes the dynamic back to top special effect code implemented by jquery. Share it with everyone for your reference, the details are as follows:

This jquery dynamic return to the top effect does not return to the top of the web page all at once, but has a buffering effect and animation effect. It uses the jQuery plug-in. This is a very commonly used web page special effect. I hope you like it. .

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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/>Just do what you want do!!!</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="goTopBtn"></div>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(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>

Copy after login

I hope this article will be helpful to everyone in jQuery programming.