一个基于jquery回到顶部的简单代码

最新推荐文章于 2021-08-26 18:06:39 发布

HeartlessSmile

最新推荐文章于 2021-08-26 18:06:39 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：前端 jquery

本文链接：https://blog.youkuaiyun.com/qq_38159923/article/details/77637548

前端开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的回到顶部按钮的实现方法。使用JavaScript和jQuery监听滚动事件，并根据滚动位置显示或隐藏回到顶部按钮。点击该按钮可以使页面平滑滚动到顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function() {
window.top.iframeHeight();
window.parent.iframeHeight();
// 回到顶部插件
function toTop() {
var container = $("<div id='toTop'>");
container.css({
'position':'fixed',
'bottom':'30px',
'right':'30px',
'zIndex':'999',
'overflow':'hidden',
});
container.hide()
var img = $("<img src='/images/toTop.png' width='50' title='回到顶部'>");
$("body").append(container);
container.append(img);
$("#toTop").click(function(){
var speed=200;//滑动的速度
$('body,html').animate({ scrollTop: 0 }, speed);
return false;
})
}
toTop();
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#toTop").fadeIn(500);
}else{
$("#toTop").fadeOut(500);
}
})
});