jquery 實作返回頂部功能_jquery
jquery
回到頂部
今天搞了一個回到頂部的JS JQ功能,廢話不多說,有圖有真相!
複製程式碼 程式碼如下:
(function($){
$.fn.survey=function(options){
var defaults={width:"298",height:"207"};
var options=$.extend(defaults,options);
if($.browser.msie){
var ieVersion=parseInt($.browser.version)}
//建立HTML
var __feedCreat=function(){
var feedHtml=$('');
feedHtml.html('u8fd4u56deu9876u90e8 u610fu89c1u53cdu9988');
$("body").append(feedHtml);
__ie6Fixed()
};
//綁定事件
var __initEvent=function(){
$(視窗).resize(function(){
var winW=$(this).width();
if(winW else{$("#pubFeedBack").show()}
});
$(window).bind("滾動",function(){
if($(this).scrollTop()>50){
$("#backTop").fadeIn().css({"display":"block"})
}
else{$("#backTop").fadeOut().css({"display":""})}
});
$("#backTop").bind("click",function(e){
e.preventDefault();
$("html,body").scrollTop(0)});
};
// 回頂端
var __tip=函數(型,tipText){
var SurveyTip=$("#D_SurveyTip"),surveyMask=$("#D_SurveyMask");
if(!surveyTip||!surveyMask){return}
SurveyTip.removeClass("警告成功").addClass(type).html(tipText);
SurveyMask.css("顯示","阻止");
SurveyTip.css("顯示","阻止");
setTimeout(函數(){
SurveyMask.css("顯示","無"); SurveyTip.css("顯示","無")},1000)
};
//ie6 相容
var __ie6Fixed=function(){
if(ieVersion!==6){return}
var SurveyBox=$("#D_SurveyBox");
var pubFeedBack=$("#pubFeedBack");
if(!surveyBox||!pubFeedBack)
{
返回
}
$(window).bind("滾動",function(){
var h=$(window).height(),st=$(window).scrollTop(),_top=h st-options.height; var _top1=h st-pubFeedBack.height()-15;surveyBox.css("top",_top "px");
pubFeedBack.css("top",_top1 "px")
})
};
//開始執行
if(screen.width>=1280)
{
(函數(){
__feedCreat(); __initEvent() })()
}
}
})(jQuery);
window.onerror=function(){返回 false};
if($.isFunction($(document).survey)){$(document).survey()}
複製程式碼程式碼如下:
#backTop i,#callSurvey i{background:url(survey.png) no-repeat;}
#pubFeedBack{position:fixed;_position:absolute;right:15px;bottom:15px;width:54px;font-size:12px;}
#backTop,#callSurvey{display:block;width:52px;padding:1px;height:56px;line-height:22px;text-align:center;color:#fff;text-decoration:none;}
#backTop{顯示:無;背景:#999;}
#backTop:懸停{背景:#ccc;縮放:1;文字裝飾:無;顏色:#fff;}
#backTop i{display:block;width:25px;height:13px;margin:14px auto 8px;background-position:-63px 0;}
#callSurvey{margin-top:1px;background:#3687d9;}
#callSurvey:hover{背景:#66a4e3;zoom:1;text-decoration:none;color:#fff;}
#callSurvey i{display:block;width:26px;height:25px;margin:9px auto 0;background-position:0 0;}
#callSurvey:停留在{背景位置:-30px 0;}
程式碼很簡單,各位直接拿去,放在自己專案中即可,如有bug請給我留言,共同完善
方法二:
主要參數:
scrollName: 'scrollUp', // Element ID
topDistance: '300', // Distance from top before showing element (px)
topSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: 'Scroll to top', // Text for element
activeOverlay: false,
// 幫助定位「回到頂端」按鈕出現時捲動到的頁面位置。
jquery程式碼(ScrollUp.js):
$(function () { $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300', // Distance from top before showing element (px) topSpeed: 300, // Speed back to top (ms) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms) animationOutSpeed: 200, // Animation out speed (ms) scrollText: 'Scroll to top', // Text for element activeOverlay: false, // set css color to display scrollup active point, e.g '#00ffff' }); });
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)