经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶端的小提示,可以很方便的滚动到顶端,省去鼠标滚动和拖动滚动条.直接贴代码(需引入jQuery.js):
JS:
$(function(){ // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('.back-to-top').fadeIn(100); } else { $('.back-to-top').fadeOut(100); } }); // jQuery实现动画滚动 $('.back-to-top').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, 500); }) })
CSS:
<style type="text/css"> .back-to-top:hover { background-color: rgba(0, 0, 0, 0.3); } .back-to-top { position: fixed; bottom: 3em; right: 3em; text-decoration: none; color: #EEEEEE; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; border-radius: 3px; border: 1px solid #CCCCCC; } </style>
HTML:
<footer> <hr> <a href="#" class="back-to-top" style="display: inline;">回到顶端</a> </footer>
相关推荐
当一面内容过多,而不想用分页的是时候,就会用到从页面底端到页面顶端,动态效果,简单的几种方法。
回到顶端插件ScrollUp是一款基于jQuery是实现的“回到页面顶端”的插件,能够帮助你快速的实现一个完全自定义的“back to top"的功能。
解决后页面滚动到顶端。
有没有见过很多在页面的右下角有个【回到顶端】的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子。 像: 控制的js代码如下: 代码如下: function goTop(){ var _btn = document....
NULL 博文链接:https://johnson-gong.iteye.com/blog/2149221
回到顶端插件ScrollUp是一款基于jQuery是实现的回到页面顶端的插件,能够帮助你快速的实现一个完全自定义的back to top的功能。
返回到列表时,列表不应刷新、页面不应回到顶端,应该是返回原地,回到刚才离开的那个位置。对于PC的网页,这个问题并不典型,因为,新链接是在原窗口打开还是在新窗口中打开,这都还没个定论,如果是在新窗口中打开...
a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一...
jQuery实现返回顶部
Scrollup是一款jQuery的“回到页面顶端”的插件,能够帮助你快速的实现一个完全自定义的“back to top"的功能。
asp.net页面按钮点击触发事件后panel滚动条非自动回到顶端,每次都要往下拉一下,关于这个问题的解决方法如下
Top of the Page 是针对 Joomla! 2.5 核心的一款系统插件,它的功能是,当网页向下滚动到一定位置时,就开始在屏幕底部显示...对于比较长的网页来说,可以方便访客快速返回页面顶端,省去拖动浏览器滚动条的麻烦。
系统主页面顶端导航栏“退出”按钮提供登出系统功能,登出系统会删除服务器session信息,并回到登陆页面。 3.2.2 查看个人信息 用户成功登录系统后会直接跳转到用户的个人信息界面,用户也可以手动选择左侧菜单栏...
后面想到应该是在父页面中没有导入layer.js文件,导入后就能正常显示在父窗口页面区域了。 显示在顶层窗口 top.layer.open({ type: 2, title: '标题', shadeClose: true, shade: 0.3, area : ['850px' , '450...
如果你在页面顶端,就在Twitter上加载新推文。如果你在“新tweets”链接下面,就不会加载新tweets。 仅当您位于页面顶部时,这会自动单击“加载新推文”。 许多其他扩展程序将始终单击它,从而使您滚动回到屏幕顶部...
是打印的时候吧? 文件>页面设置>工作表 打印标题 有两个选项 1 顶端标题行 2 左侧标题列 需要哪个就点击后面的折叠按钮 回到表格里面选择位置 回来确定就可以了
这是一款基于jquery小火箭返回顶部特效源码,解决了页面太长造成的用户返回页面顶端困难。 为大家分享的jquery小火箭返回顶部代码如下 <head> <title>jquery小火箭返回顶部代码</title> <link...