Sina Weibo_jquery의 최상위로 돌아가는 Jquery 구현 코드

1. 소개

웹 페이지의 경우 페이지가 높을 경우 빠르게 상위로 돌아갈 수 있도록 상단으로 돌아가기 버튼을 추가합니다.

그중, Taobao에서는 Renren의 상단으로 복귀가 하단 도구 모음에 바로 표시되기 전에 스크롤 막대의 스크롤 거리가 특정 거리보다 커야 합니다. 스크롤 높이에 있습니다. 0보다 클 때 표시되며, 위로 돌아가는 효과는 부드러운 애니메이션 효과입니다. 이 기사의 구현은 Sina Weibo의 효과와 유사합니다.

2. jQuery에서 맨 위로 돌아가기

여기를 클릭하세요. jQuery에서 맨 위로 데모로 돌아가기

당신 페이지에 스크롤 높이가 있는 경우 아래 그림과 같이 검은색 배경에 작은 반투명 막대가 있고 오른쪽 하단에 "맨 위로 돌아가기"라는 단어가 표시됩니다.

'맨 위로 돌아가기'는 여기를 클릭하세요. ''라는 단어가 표시된 버튼 뒤에는 페이지가 윤활된 것처럼 보였고, 갑작스러운 소리와 함께 위로 미끄러지는 동시에 클릭해야 할 버튼도 숨기고 재생되었습니다. 탐색 - 사라졌습니다.
여기서 jQuery를 구현하든 MooTools를 구현하든 다음 CSS 코드는 다음과 같이 일관됩니다.
CSS 코드:

복사 code 코드는 다음과 같습니다:

.backToTop {

display: none
width: 18px
line-height: 1.2 ;
패딩: 5px 0;
색상: #fff;
글꼴 크기:
위치: 고정;
_위치:
오른쪽: 100px;
_바닥: "자동";
불투명도: .6; 필터: 알파(불투명도=60);
}


JS 코드:




코드 복사

코드는 다음과 같습니다.

(function() { var $backToTopTxt = "Back to Top", $backToTopEle = $('

').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html , body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() {

var st = $(document).scrollTop(), winh = $(window) .height();

(st > 0)? $backToTopEle.hide()
//IE6에서의 위치
if (!window.XMLHttpRequest) >$backToTopEle.css(" top", st winh - 166);
}
};
$(window).bind("scroll", $backToTopFun)
$(function( ) { $backToTopFun() });
})();




3. MooTools


여기를 클릭하세요. 맨 위로 돌아가기 데모

MooTools의 데모 페이지 효과는 기본적으로 위 jQuery 데모의 효과와 동일합니다.

코드 부분. CSS 코드는 위와 동일합니다. JS 코드는 다음과 같습니다.


코드 복사


코드는 다음과 같습니다.

(function () { var $backToTopTxt = "맨 위로 돌아가기", $backToTopEle = new Element("div", { "class": "backToTop", title: $backToTopTxt }) .set("text", $backToTopTxt).addEvent("click", function() { var st = document.getScroll().y, speed = st / 6;

var funScroll = function() {

st -= 속도
if (st window.scrollTo(0, st)
if (st > 0) { setTimeout (funScroll, 20); }
};
funScroll();
}).inject(document.body), $backToTopFun = function() {
var st = document.getScroll() .y, winh = window.getSize().y;
(st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none") ;
//IE6
if (!window.XMLHttpRequest) {
$backToTopEle.setStyle("top", st winh - 166)
}
; window.addEvents({
scroll: $backToTopFun,
domready: $backToTopFun
})
})();
위 코드를 직접 복사하여 JS 코드에서 효과를 쉽게 얻을 수 있습니다.

MooTools의 Fx 애니메이션 메소드는 스크롤 막대의 부드러운 스크롤 효과를 얻으려면 Fx.Scroll 플러그인을 사용해야 합니다. 하지만 여기서는 당연히 간단한 기능을 위해 추가 플러그인을 사용할 필요가 없기 때문에 부드러운 스크롤 효과를 얻기 위해 타이머를 직접 설정했습니다.

참고: 데모 페이지의 뷰티 사진은 페이지 높이를 확장하여 스크롤 막대를 만드는 데 사용됩니다.

4. 결론
사실 페이지를 상위로 되돌리는 효과를 얻을 수 있는 가장 간단한 방법은 a 태그인데, 그 다음에는 href 속성 값이 바로 #anchor 입니다. 그리고 괜찮아요. 하지만 이 방법은 URL 주소 뒤에 "#"을 생성합니다. 앵커 포인트에 대한 자세한 내용은 이전 기사 "앵커 포인트 점프 및 관련 작업과 jQuery의 플러그인에 대해"를 참조하세요.