页面中根据滚动条,显示返回顶部图标

比较简单,直接记录代码

window.onscroll = function(){
                if(document.body.scrollTop>10){
                        $('#go-top').show();
                }
                if(document.body.scrollTop<=10){
                        $('#go-top').hide();
                }
}<pre name="code" class="javascript">function goTop()
{
<span style="white-space:pre">	</span>document.body.scrollTop = 0;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-05 09:17:16

页面中根据滚动条,显示返回顶部图标的相关文章

Web前端 页面功能——点击按钮返回顶部的实现方法

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) html代码 <a href="javascript:scroll(0,0)">

扒皮下音悦台的“返回顶部”图标效果

昨晚想仿造下音悦台首页“返回顶部”的小超人效果,觉得这东西的实现很简单,应该不会费时超过一个钟.结果撸代码的过程发现存在很多意想不到的问题. 先发个图: 有兴趣的朋友可以去音悦台点一下这个小超人图标试一试,默认是隐藏的,滚动条下拉一小段距离后会从下面飞上来悬停在右下角,点击的时候不但浏览器滚动条会返回顶端,小超人也会往上飞到顶部消失掉. 不过我印象中,以前若鼠标移到图标上,小超人会变成一个动态(小超人的披风会摆动)的gif图,不过现在取消了这效果,可能是因为gif毕竟不是png,多少带有些锯齿影

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

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

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

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

页面中 json 格式显示 数据

在页面中,有时候我们需要的不仅仅是将数据显示出来,而且要以以 json 的格式显示数据,如显示接口的时候 我们需要如下显示 这个时候,主要用到了 <pre> 标签 $.get("/chat", { "query": send_content, "ident": ident }, function (data) { var result = JSON.stringify(JSON.parse(data), null, 4); // 格式

【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

使页面中得滚动条始终在底部

<div id="content" style="width:100%;height:100px;border:1px solid #ccc;overflow-y: auto;margin-top:20px;margin-bottom:20px;"> <!--内容显示框--> </div> <div> <input type="text" value="" id="

js禁用页面中退格键返回功能

//禁用退格键返回功能 document.onkeydown = function(e) { e = e||event; if(e.keyCode == 8) { // 如果是在textarea内不执行任何操作 var obj = e.srcElement || e.target; var tag=obj.tagName.toLowerCase(); if(tag != "input" && tag != "textarea" &&