700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 用jQuery实现返回页面顶部的功能

用jQuery实现返回页面顶部的功能

时间:2018-07-27 05:29:39

相关推荐

用jQuery实现返回页面顶部的功能

页面中有返回顶部的图标用起来使我们预览页面更方便,这个功能也是在网站中常见的功能,今天研究了一个简单的例子,用jQuery实现返回顶部的功能:

css代码如下:

*{ margin:0; padding:0;}

#backToTop{ position:fixed; bottom:10px; left:80px; _position: absolute;_left:80px; _bottom:auto;}

#backToTop a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:80px; -moz-transition:color 1s;

-webkit-transition:color 1s; -o-transition: color 1s; width:18px; background:#03F;}

#backToTop a:hover{ color:#979797;}

html代码如下:

<p id="backToTop">

<a href="#top">返回顶部</a>

</p

jQuery代码如下:

function setGoTopLocation(){

var backTop=$("#backToTop");

backTop.css({"position":"absolute"});

$(window).scroll(function(){

var top=$(window).scrollTop()+$(window).heigth;

backTop.css({"top":top+"px"});

});

};

$(document).ready(function(){

setGoTopLocation();

var backTop=$("#backToTop")

backTop.hide();

$(function(){

$(window).scroll(function(){

if($(window).scrollTop()>100){

backTop.fadeIn(1500);

}

else{

backTop.fadeOut(1500);

}

})

backTop.click(function(){

$('body,html').animate({scrollTop:0},1000);

})

})

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。