jquery 맨 위 단추와 스크롤 스크롤 기능 [애니메이션 효과] 되돌리기
20409 단어 jquery
jQuery 스크립트:
1 <script type="text/javascript">
2 $(function() {
3 var scrollDiv = document.createElement('div');
4 $(scrollDiv).attr('id', 'toTop').html('^ ').appendTo('body');
5 $(window).scroll(function() {
6 if ($(this).scrollTop() != 0) {
7 $('#toTop').fadeIn();
8 } else {
9 $('#toTop').fadeOut();
10 }
11 });
12 $('#toTop').click(function() {
13 $('body,html').animate({ scrollTop: 0 }, 800);
14 })
15 });
16 </script>
CSS 스타일:
1 <style type="text/css">
2 #toTop
3 {
4 width: 100px;
5 z-index: 10;
6 border: 1px solid #333;
7 background: #121212;
8 text-align: center;
9 padding: 5px;
10 position: fixed;
11 bottom: 0px;
12 right: 0px;
13 cursor: pointer;
14 display: none;
15 color: #fff;
16 text-transform: lowercase;
17 font-size: 0.9em;
18 }
19 </style>
iframe 프레임이 있는 스크롤 작업:
1 <script type="text/javascript">
2
3 $().ready(function() {
4 $('<div id="return_old_tips" class="btn_return_old" style="position:' + ($.browser.msie ? "absolute" : "fixed") + ';" onclick="return_old({$feedback_flag},\'{$current_url}\')"> </div>').appendTo($("body"));
5 if ($.browser.msie) {
6 $("#return_old_tips").css("top", 200);
7 }
8 if ($.browser.msie) {
9 top.document.body.onscroll = function() {
10 var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
11 if (f > parseInt($("body").height(), 10)) {
12 f = parseInt($("body").height(), 10);
13 }
14 $("#return_old_tips").css({
15 top: f,
16 left: 0
17 });
18 }
19 top.document.body.onresize = top.document.body.onscroll;
20 } else {
21 $(window.parent.document).scroll(function() {
22 var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
23 if (f > parseInt($("body").height(), 10)) {
24 f = parseInt($("body").height(), 10);
25 }
26 $("#return_old_tips").css({
27 top: f,
28 left: 0
29 });
30 }).resize(function() {
31 var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
32 if (f > parseInt($("body").height(), 10)) {
33 f = parseInt($("body").height(), 10);
34 }
35 $("#return_old_tips").css({
36 top: f,
37 left: 0
38 });
39 });
40 }
41 });
42
43 </script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.