善恶资源网专注优秀技术教程分享网-傅汉松!

jquery回到顶部代码

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是jquery回到顶部代码

傅汉松

HTML代码:

<div class="return"><a id="mtop_div" class="return_top"></a></div>

css代码:

.return {
position: fixed;
right: 0.5rem;
bottom: 1rem;
z-index: 99999;
height: 7.5rem;
}
.return .return_top {
width: 3.5rem;
height: 3.5rem;
cursor: pointer;
background: url(totop.png) no-repeat;
background-size: 3.5rem;
display: block;
font-size: 0rem;
}

代码1(有时候会冲突):

$(function(){$(function () {$(window).scroll(function(){if ($(window).scrollTop()>500)
{$("#mtop_div").fadeIn(500);}else{$("#mtop_div").fadeOut(500);}});});});
if (top.location != self.location)top.location=self.location;

建议使用代码2:

$(document).ready(function() {
//首先将#mtop_div隐藏
$("#mtop_div").hide();
//当滚动条的位置处于距顶部50像素以下时,跳转链接出现,否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#mtop_div").fadeIn(200);
} else {
$("#mtop_div").fadeOut(200);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#mtop_div").click(function() {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
});


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 jquery回到顶部代码
HTML代码:<div class="return"><a id="mtop_div&quo...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    81.99ms