jquery_jquery로 구현된 동적 맨 위로 복귀 특수 효과 코드-JS 튜토리얼-php.cn

jquery_jquery로 구현된 동적 맨 위로 복귀 특수 효과 코드

WBOY

풀어 주다： 2016-05-16 15:34:54

원래의

1595명이 탐색했습니다.

이 기사의 예에서는 jquery로 구현된 동적 백투톱 특수 효과 코드를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이 jquery 동적 상단 복귀 효과는 웹 페이지의 상단으로 한꺼번에 복귀하는 것이 아니라 버퍼링 효과와 애니메이션 효과가 있는 jQuery 플러그인을 사용하는 것입니다. 특수 효과. 마음에 드셨으면 좋겠습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체적인 코드는 다음과 같습니다.

<!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>

로그인 후 복사

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.