jquery javascript 回到顶部功能
今天搞了一个回到顶部的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=$('<div id="pubFeedBack"></div>');
- feedHtml.html('<a href="#top" id="backTop"><i></i>\u8fd4\u56de\u9876\u90e8</a><a href="#" id="callSurvey"><i></i>\u610f\u89c1\u53cd\u9988</a>');
- $("body").append(feedHtml);
- __ie6Fixed()
- };
- //绑定事件
- var __initEvent=function(){
- $(window).resize(function(){
- var winW=$(this).width();
- if(winW<=1124){$("#pubFeedBack").hide()}
- else{$("#pubFeedBack").show()}
- });
- $(window).bind("scroll",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=function(type,tipText){
- var surveyTip=$("#D_SurveyTip"),surveyMask=$("#D_SurveyMask");
- if(!surveyTip||!surveyMask){return}
- surveyTip.removeClass("warning success").addClass(type).html(tipText);
- surveyMask.css("display","block");
- surveyTip.css("display","block");
- setTimeout(function(){
- surveyMask.css("display","none"); surveyTip.css("display","none")},1000)
- };
- //ie6兼容
- var __ie6Fixed=function(){
- if(ieVersion!==6){return}
- var surveyBox=$("#D_SurveyBox");
- var pubFeedBack=$("#pubFeedBack");
- if(!surveyBox||!pubFeedBack)
- {
- return
- }
- $(window).bind("scroll",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)
- {
- (function(){
- __feedCreat(); __initEvent() })()
- }
- }
- })(jQuery);
- window.onerror=function(){return 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{display:none;background:#999;}
- #backTop:hover{background:#ccc;zoom:1;text-decoration:none;color:#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{background:#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:hover i{background-position:-30px 0;}
jquery javascript 回到顶部功能的更多相关文章
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- jQuerry点击按钮回到顶部功能
简单实现点击按钮回到顶部功能
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
随机推荐
- C#委托、事件剖析(下)
本节对事件进行总结. 二.事件: 1.概念:Event:A member that enables an object or class to provide notifications;官方的解释是 ...
- RHCE7 管理I-12归档文件并在Linux系统间复制文件
tar命令使用 默认tar只有归档的功能,没有压缩功能 tar [option...] [file]... -c,--create 创建 -x,--extract,--get 解压 -t, ...
- Linux内核同步 - RCU基础
一.前言 关于RCU的文档包括两份,一份讲基本的原理(也就是本文了),一份讲linux kernel中的实现.第二章描述了为何有RCU这种同步机制,特别是在cpu core数目不断递增的今天,一个性能 ...
- ArcMap导入数据到ArcSDE报000597或者000224的错误
这两天碰到不同用户提出的不同的问题,可是分析之后发现导致该问题的解决办法是同一个原因. -------------------------------------------------------- ...
- Oracle学习笔记之四,SQL语言入门
1. SQL语言概述 1.1 SQL语言特点 集合性,SQL可以的高层的数据结构上进行工作,工作时不是单条地处理记录,而对数据进行成组的处理. 统一性,操作任务主要包括:查询数据:插入.修改和删除数据 ...
- [hihoCoder] #1122 : 二分图二•二分图最大匹配之匈牙利算法
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上一回我们已经将所有有问题的相亲情况表剔除了,那么接下来要做的就是安排相亲了.因为过年时间并不是很长,所以姑姑希望能够尽可 ...
- php教程之php空白页的原因及解决方法
php中出现空白页的原因及解决方法汇总. 很多程序员在进行php开发的时候都遇到过出现空白页的请,综合分析来说,在php编程中出现空白页面可能是由以下几个原因造成的: 1.逻辑错误逻辑错误是最难排除的 ...
- 教你轻松自己定义ViewPagerIndicator
ViewPagerIndicator集成分页指示器.事实上就是标题栏和ViewPager的联动效果,大家先看一下效果图直观了解:(图侵删) 这篇文章将会教大家怎么简单高速地制作自己的ViewPager ...
- nginx location URI匹配规则
当nginx收到一个请求后,会截取请求的url部份,去搜索所有location指令中定义的URI匹配模式.在server模块中可以定义多个location指令来匹配不同的url请求,多个不同的loca ...
- SourceInsight-显示文件完整路径
使用Source insight的时候想看文件的全路径,但是默认的是中间省略的路径,所以可以通过: 1.Options-->Preferences-->Display 设置Trim lon ...