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

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

            //页面resize时,“返回顶部”按钮 是否显示
            $(window).resize(function () {
                showBackToTop();
            });
                <!--返回顶部-->
                <div id="divTop" class="returntop" style="position:fixed; right:10px; bottom:90px; display:none;"></div>
            //返回顶部
            $("#divTop").click(function () {
                $("body, html").animate({ scrollTop: 0 }, 0);
                $(this).hide();
            });
时间: 2024-07-30 21:15:04

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

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

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

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

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

“返回顶部”按钮

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

在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

listview下拉到一定位置显示回到顶部按钮

布局文件: <RelativeLayout android:id="@+id/ll_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/ll_bottom" android:layout_below="@id/ll_top" > <

根据浏览器是否出现滚动条,显示返回顶部

//返回顶部 只在未显示时,判断是否显示并返回顶部 function showBackToTop() { if ($("#divTop").is(":hidden")) { if ($(document).height() - $(window).scrollTop() - $(window).height() > 0) { $("#divTop").show(); } } }

返回顶部按钮功能的实现

<!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