JQuery是时下比较热门的Javascript库,通过JQuery可以实现很多很炫的效果,JQuery返回顶部只是一个基本的应用,同时也是一个很实用的功能。

最近留言评论跟我要我博客上返回顶部的功能,最近也比较的忙,懒的一个一个的发了,想知道怎么用看看这篇文章就OK了,其实也没有什么东西,老手飘过!

让返回底部的图片一直居于浏览器的右下角,不应浏览器窗口大小的改变而改变。同时我又加了效果,浏览器滚动到一定的距离才会显示返回按钮。

方法很简单,请确保你页面包含了的Jquery框架。

scripttext/javascript src= https://libs.cdnjs.net/jquery/1.8.3/jquery.min.js /script

Jquery代码,放到合适位置

scripttext/javascript jQuery(document).ready(function(){ $(window).scroll(function() { var$(window).scrollTop();//滚动的高度 if (scroHei > 400) { $('.gotop').fadeIn(); } else { $('.gotop').fadeOut(); jQuery('.gotop').click(function(){ jQuery('html,body').animate({ scrollTop: '0px' }, 800); /script

然后代码 body /body 之间加入

然后在CSS代码中加入下面的CSS

.roll {bottom:120px;float:right;position:fixed;right:60px;width:32px;z-index: 9999;display: none;}.roll_top {position:relative;cursor:pointer;height:32px;width:32px;border-radius:4px;background:url("up.png") no-repeat;}.roll_top:hover {background:url("up.png") no-repeat -32px 0;}

up.png

你可自行替换。好了,修改完毕。