最新消息:欢迎加入小松的QQ群一起讨论一起学习,多说即将关闭,感觉好可惜啊

jquery js top按钮

前端技术 1185浏览 0评论

为了提高用户替换很多网站都会加一个top的按钮,今天公司的网站也要加一个top的按钮于是在网上搜罗了一下

讲一下top的原理
1 当滚动条下滑到一定高度的时候,按钮出现。
2 点击按钮,窗口滑动回顶部,还一种方式是带个“#”的链接。
3 当窗口滑动到距离页面最高点一点高度,顶部按钮隐藏。
实现的代码为
html代码放到页面最下面

<div class="goTop">
<a id="goToTop" href="javascript:void(0)" onclick="return false" title="返回顶部"></a>
</div>

css样式防到head标签里具体原因请看浏览器html解析过程

<style>
.goTop {
height: 50px;
overflow: hidden;
width: 50px;
position: absolute;
top:0;
display: none;
}
.goTop a, .goTop a:link {
background: url("img/ico_gotop.png") no-repeat scroll 0 0 transparent;
display: block;
height: 50px;
width: 50px;
}
.goTop a:hover {
background: url("img/ico_gotop.png") no-repeat scroll 0 -50px transparent;
display: block;
}
</style>

JS 代码
这里是用jquery写的所以要先加载jquery包

$(window).scroll(function(){//注册滑动条滑动时的动作

//滚动条到顶部的距离
var scrTop = $(window).scrollTop();

//回到顶部按钮距离窗口右侧的距离,
//.midfix 是我页面最外层div
//这句比较难理解,用到了三元运算,不懂的百度下。
var myWidth = ($(window).width() > $(".midfix").width()) ?(($(window).width() - $(".midfix").width())/2 - 80):0;

//窗口高度
var windowTop = $(window).height();

if ((windowTop-300)<scrTop){
//滚动高度大于一页
$(".goTop").css("top",(scrTop + windowTop -100)).css("right",myWidth).fadeIn("slow");
}else{
//滚动高度小于一页
$(".goTop").css("top",(scrTop + windowTop -100)).css("right",myWidth).fadeOut("slow");
}
});

//按钮被点击后,滑动到顶部。
$('#goToTop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

这个是案例用到的图片,自己下载

gotop

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» jquery js top按钮
本文链接地址:https://www.phpsong.com/258.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!