“返回顶部”按钮

实现过程

当页面滚动时(监听scroll事件),浏览器滚动条处于最顶部时,隐藏“返回顶部”按钮,当滚动条继续向下滚动时,动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值,如果这个值大于某个特定的数字时,显示“返回顶部”按钮,否则隐藏。然后,当单击“返回顶部”按钮时,其实应该是一个链接,将滚动条滚回浏览器最顶部。在这个过程中,我们可以使用animate来创建动画效果,即返回顶部时有个过渡效果。

$(function(){
    $(".backToTop").goToTop();
    $(window).bind(‘scroll resize‘,function(){
        $(".backToTop").goToTop();
    });
}); 
var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
            controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
            var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;

            if (shouldvisible){
                $this.stop().show();
            }else{
                $this.stop().hide();
            }
 http://www.helloweba.com/view-blog-196.html
时间: 2024-10-06 13:42:46

“返回顶部”按钮的相关文章

在octopress中增加“返回顶部”按钮

通过"返回顶部"按钮,可以快速返回页首.配置按照Octopress主题样式修改一文.但照着做下来并不能实现配置.因此到疑似作者812lcl的github仓库中找了最新版本的配置. javascripts脚本 新建一个文件source/javascripts/top.js.它的最新版本在: https://github.com/812lcl/812lcl.github.com/blob/source/source/javascripts/top.js 显示按钮 显示按钮需要新建sourc

JS——给网页添加返回顶部按钮

在页面右下方添加一个返回顶部按钮,当页面滑到一定位置时,按钮出现,否则消失,默认隐藏 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ wid

jQuery实现返回顶部按钮功能

html结构 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <span class="toolbar-btn" id="backtop"> <i class="toolbar-icon icon-upload2"></i> //图标字体 &l

【Android】ListView监听上下滑动(判断是否显示返回顶部按钮)

设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮(具体逻辑请看代码--附有详细注释). 下载地址:http://www.dwz.cn/zG99W 源码运行动态图

微网站自动显示 返回顶部 按钮 的代码

//返回顶部 var globalScrollTop = $(document).height() - $(window).height(); function showBackToTop() { if ($(window).scrollTop() > globalScrollTop) { $("#divTop").show(); } else { $("#divTop").hide(); } } //页面滚动时,“返回顶部”按钮 是否显示 $(window)

返回顶部按钮功能的实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toTop</title> <style type="text/css"> *{ margin:0; padding: 0; } html{ height: 100%; } .toTopBtn{ position: fixed

在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .lala{ width: 10%; background: pink; color: #333; height: 200px; overfl

android判断位置显示返回顶部按钮最精简代码

listView.setOnScrollListener(new OnScrollListener() { @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { updateBackTopButtonState(); }}); private void updateBackTopButtonState() { if (ad

为页面增加滚动事件侦听,当页面滚动高度大于200,在页面右下方出现 返回顶部 按钮

1 <body> 2 <div style="height: 2000px;"></div> 3 <a href="#" id="backTop" style="display: none;position: fixed;bottom: 0;right: 0;">回到顶部</a> 4 <script> 5 window.addEventListener('