返回顶部：js代码篇

代码篇：

地址：jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部
我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。

HTML部分：

<span href="" class="goTop">返回顶部</span>

CSS部分：


body{height: 2000px;
}
.goTop{position: fixed;right: 50px;bottom: 100px;display: none;
}

JS部分：

<script>$(function() {$(window).scroll(function() {var scroHei = $(window).scrollTop();//滚动的高度if (scroHei > 400) {$('.goTop').fadeIn();} else {$('.goTop').fadeOut();}})/*点击返回顶部*/$('.goTop').click(function() {$('body,html').animate({scrollTop: 0}, 300);})})
</script>

返回顶部：js代码篇相关推荐

手机移动端返回顶部js代码demo效果示例（整理）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
淘宝网返回顶部JS代码效果
淘宝网返回顶部JS代码效果 http://hi.baidu.com/huangyongliang/blog/item/99f069cb0e731b12be09e619.html posted on 2 ...
html返回底部代码,jQuery实现的个性化返回底部与返回顶部特效代码
本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码.分享给大家供大家参考,具体如下: 运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能 ...
jquery返回顶部特效代码网页滚动返回顶部特效
网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能,可以使用HTML来实现,但是返回顶部效果太过僵硬,体验不好,这里分享一个纯js返回顶部切具有过渡效果的实例. 效果如上图所示. 具体代码如下: ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
html一键回到顶部,HTML实现简单大方的 “返回顶部” 实例代码
简单的"返回顶部"效果 .cs{ width:50px; height:100px; background-color: #F0F0F0; border:1px solid #D9 ...
html js 回到顶部,简单的返回顶部的js代码
返回顶部js代码 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
html设置返回首页,html页面添加返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:// 返回顶部$('a.top'). html:css:.box {wid ...
html5 按钮回到顶部,html页面添加返回顶部按钮
html:css:.box {width: 100%;height: 100px;background: skyblue;}.box1 {width: 100% 利用 jQuery 中的 animat ...

返回顶部：js代码篇

代码篇：

HTML部分：

CSS部分：

JS部分：

返回顶部：js代码篇相关推荐

最新文章

热门文章