无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

jQuery完成简易并且很帅的回到顶端连接实际效果

时间:2021-03-02 00:49来源:未知 作者:jianzhan 点击:
jQuery回到顶端(查询实例)一、HTML(基本构造)body id= top p id= back-to-top a href= #top span /span 回到顶端 /a /p /body 拥有上边的html后,当我们们点一下 回到顶端 这一连接时,便会全自动自动
jQuery回到顶端(查询实例)

一、HTML(基本构造)

 body id= top 
 p id= back-to-top a href= #top span /span 回到顶端 /a /p 
 /body 
 
拥有上边的html后,当我们们点一下 回到顶端 这一连接时,便会全自动自动跳转到body标识的部位,也便是网页页面的顶端。

二、CSS(款式化)

往往在上边html编码的 a 标识中加上一个空的 span 标识,目地是以便建立大家料想的回到顶端连接款式,以下图:

back-to-top.gif

接下去大家必须应用position : fixed;特性将自动跳转连接固定不动到网页页面上,那样它便可以随时随地滞留在视野范畴内。下列是所有CSS编码:

p#back-to-top{   position:fixed;   bottom:100px;   left:80px; } p#back-to-top a{   text-align:center;   text-decoration:none;   color:#d1d1d1;   display:block;   width:80px;

  /*应用CSS3中的transition特性给自动跳转连接中的文本加上渐变色实际效果*/

  -moz-transition:color 1s;   -webkit-transition:color 1s;   -o-transition:color 1s; } p#back-to-top a:hover{   color:#979797; } p#back-to-top a span{   background:#d1d1d1 url(images/arrow-up.png) no-repeat center center;   border-radius:6px;   display:block;   height:80px;   width:80px;   margin-bottom:5px;

  /*应用CSS3中的transition特性给 span 标识情况色调加上渐变色实际效果*/

  -moz-transition:background 1s;   -webkit-transition:background 1s;   -o-transition:background 1s; } #back-to-top a:hover span{   background:#979797 url(images/arrow-up.png) no-repeat center center; } 

三、jQuery(动态性实际效果)

应用jQuery要完成的实际效果是:当网页页面第一次加载,访问器翻转条处在最顶端的情况下,自动跳转连接处在掩藏情况。当翻转条往下翻转后,自动跳转连接慢慢凸显,当点一下自动跳转连接后,网页页面慢慢翻转至顶端,自动跳转连接慢慢消退。下列是jQuery编码:

script type= text/javascript src= ajax/libs/jquery/1.4.0/jquery.min.js script type= text/javascript $(document).ready(function(){

//最先将#back-to-top掩藏

 $( #back-to-top ).hide();

//当翻转条的部位处在距顶端100清晰度下列时,自动跳转连接出現,不然消退

$(function () { $(window).scroll(function(){ if ($(window).scrollTop() 100){ $( #back-to-top ).fadeIn(1500); } else { $( #back-to-top ).fadeOut(1500); } });

//当点一下自动跳转连接后,返回网页页面顶端部位

$( #back-to-top ).click(function(){ $( body,html ).animate({scrollTop:0},1000); return false; }); }); }); /script  

四、适配性

这儿大家给body标识加上了id= #top ,目地是当访问器不兼容javascript的情况下,也可完成回到顶端的实际效果。具体上jQuery可让翻转条精准定位于一切部位,因此这儿大家保存了对访问器的适配性。 

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信