怎样制作超过一屏才显示的jquery返回顶部按钮

 我来答
s839608736
2016-01-25 · TA获得超过2399个赞
知道大有可为答主
回答量:1908
采纳率:71%
帮助的人:883万
展开全部
  1. 找到或制作一张返回顶部的图片,可以使用百度图片查找返回顶部按钮。

  2. 找到并引用jq文件,确保路径正确

<script language="javascript" type="text/javascript" src="jquery.min.js"></script>

  3.在</body>前加入返回按钮代码:

<div id="back-to-top" style="display: block;"><a href="#top"></a></div>

  4.在<head></head>中加入样式,如果是引用css文件,直接加css文件中,但要注意图片的路径正确

<style type="text/css">

#back-to-top{

position:fixed;

bottom:5%;

left:90%;

}

#back-to-top a{

display:block;

height:50px;

width:50px;

background:url(top.png) no-repeat center center;

margin-bottom:5px;

}

</style>

   5.

在<head></head>或</body>前加入jq代码

<script type="text/javascript">

$(document).ready(function(){

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

$(function () {

$(window).scroll(function(){

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

$("#back-to-top").fadeIn(500);

}

else

{

$("#back-to-top").fadeOut(500);

}

});

$("#back-to-top").click(function(){

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

return false;

});

});

});

  </script>

渔舟唱晚1990
2016-01-15
知道答主
回答量:55
采纳率:0%
帮助的人:19.7万
展开全部
可以先通过$(window).height()获得可视区域的高度,再加个判断,大于高度时按钮显示。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式