首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js点击按钮返回页面顶部

2016-08-22 03:08:28 在进行官网一类的网站建设时,经常会出现页面太长的现象,当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条,用户体验相当不好,于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...,点击该按钮返回顶部,并且有一定的效果。...该方法就是利用锚点的方式来返回顶部。即给最顶部的div设置一个id,然后a标签的链接地址写成该id,当点击时就会返回顶部,但是缺点为过于突兀,因为是立即返回顶部。...点击a标签即会返回到顶部div所在位置 再来看第二种方式 第二种方式相对来说比较人性化,看起来也比较舒服,直接先来看代码吧 落帆亭博客专注web前端开发 点击之后滚动条会有一个滚动过程,不是一下子回到顶部,个人感觉不错。

25.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    点击按钮,回到页面顶部的5种写法

    元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度 由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能...,只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果 1 2 顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。...如果没有提供该参数,默认为true,使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果...来实现 [注意]IE9-浏览器不支持该方法,可以使用setTimeout来兼容 1、增加scrollTop的动画效果 使用定时器,将scrollTop的值每次减少50,直到减少到0

    2.7K30

    Android开发(3) 可滚动的录入表单演示

    本文使用的控件有: RelativeLayout 相对布局 ScrollView 滚动视图 TableLayout 表格布局 ?...如上图所示,界面(或者说窗体)分为三个部分: 顶部:信息提示,标题(Title) ? 中间:表单内容 ? 底部:操作按钮 ?...我们设定顶部控件的相对属性为:android:layout_alignParentTop="true",这个属性意思是对齐到父控件的顶部 然后设定底部控件的属性为:android:layout_alignParentBottom...名字是:toppanel 底部控件使用一个RelativeLayout 名字是:panelBottom 中间控件使用一个ScrollView,滚动视图控件。...该控件的好处是当它的子控件太长时,会自动出现滚动条。 下面我们为ScrollView下添加一个TableLayout,这个一个表格布局控件,使得布局非常整齐。

    1.2K00

    Android之有效防止按钮多次重复点击

    为了防止测试妹子或者用户频繁点击某个按钮,导致程序在短时间内进行多次数据提交or数据处理,那到时候就比较坑了~ 那么如何有效避免这种情况的发生呢?...我的想法是,判断用户点击按钮间隔时间,如果间隔时间太短,则认为是无效操作,否则进行相关业务处理 首先将这块提取为工具类(方便接下来的调用),现在就起名为:ButtonUtils public class...return isFastDoubleClick(-1, DIFF); } /** * 判断两次点击的间隔,如果小于1000,则认为是多次无效点击 * * @return...lastButtonId == buttonId && lastClickTime > 0 && timeD < diff) { Log.v("isFastDoubleClick", "短时间内按钮多次触发...我的想法就是在单击事件中进行判断,看看当前的点击事件是否为有效点击事件 好了,一个简单又实用的防止按钮多次重复点击的工具类就搞定了。。。 如果大家还有什么比较实用的方法,,,可以一起交流哈~

    1.6K10

    android 触摸屏事件_android studio按钮点击事件

    由于触摸(Touch)而触发的事件 Android的事件:onClick, onScroll,onFling等等,都是由许多个Touch组成的。...ACTION_UP //表示为离开屏幕 ACTION_CANCEL //表示取消手势,不会由用户产生,而是由程序产生的 一个Action_DOWN, n个ACTION_MOVE, 1个ACTION_UP,就构成了Android...对于android 自定义控件的事件 android提供了一个GestureDetector的类和GestureDetector.OnGestureListener的接口来判断用户在界面上做出怎么样的动作...Android里有两个类 android.view.GestureDetector android.view.GestureDetector.SimpleOnGestureListener (另外android.widget.Gallery...点击一下非常快的(不滑动)Touchup: onDown->onSingleTapUp->onSingleTapConfirmed 点击一下稍微慢点的(不滑动)Touchup: onDown->onShowPress

    2.1K30

    Android之按钮点击事件(单击、双击、长按等)

    在布局文件中添加按钮点击事件 在java文件中添加按钮点击事件 为多个按钮添加点击事件 按钮按下、释放事件 按钮长按事件 按钮长按时过滤掉单击事件 按钮双击事件 按钮双击时过滤掉单击事件 在布局文件中添加按钮点击事件...="false" android:onClick="showMsg"/> android:onclick属性的值"showMsg"即为用户点击屏幕按钮时触发方法的名字。...,每当点击按钮时,就会执行监听器中的onClick()方法。...为多个按钮添加点击事件 处理多个按钮的点击事件时,可以使用上面的方式为每个按钮分别绑定事件监听器,也可以使用下面的方式定义一个实现监听器的类,当然,下面的方式结构更加清晰。...、释放事件 一个按钮点击的完整过程是:pressed + released = clicked,所以当按下按钮并滑动到按钮之外的区域释放时,点击事件并不会触发。

    2.4K20

    Android开发学习笔记(一)按钮的点击相应

    因为一个小项目需要进行安卓APP的开发,特此进行Android的学习,同时我也没接触过JAVA,所以暂时对各种语法的理解并不深刻,仅做一个使用方法的记录,方便复制粘贴。...参考学习视频:Android安卓开发30小时从零搞定百度地图(2020安卓开发全套教程) 相应按钮的事件: public void sendMessage(View view){ EditText...intent.setClassName(this,"cn.edu.cdut.mainactivity.secondActivity"); // startActivity(intent); //这个写法不知道为什么点击之后软件会崩溃...intent); } 注:action.nextActivity为 xml文件中自定义的action名字 其中AndroidManifest.xml部分文件为: android..." /> android:name="android.intent.category.DEFAULT" /> </intent-filter

    46410

    Android实现两个ScrollView互相联动,同步滚动的效果

    最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动其中的一个ScrollView另一个ScrollView也一同跟着滑动,要做到一起同步滑动。...其实对于ScrollView,Android官方并没有提供相关的获得或者设置滑动距离的方法,也没有提供相应的监听方法。但是那要怎么来做呢?不用担心,肯定能做到。...具体实现方法如下: 1重写ScrollView package net.loonggg.scrollviewdemo; import android.content.Context; import android.util.AttributeSet...; import android.widget.ScrollView; public class ObservableScrollView extends ScrollView { private ScrollViewListener...== sv2) { sv1.scrollTo(x, y); } } } 到这里就讲完了,应该说的比较明白了吧,不懂的可以加我个人微信进行交流。

    2.1K50

    2.ui

    一个是从里往外撑,一个是从外往里撑 ScrollView ScrollView滚动视图是指当拥有很多内容,屏幕显示不完时,需要通过滚动跳来显示的视图。ScrollView只支持垂直滚动。...,LinearLayout在写布局 3、上述两个控件可以互相嵌套 4、滚动条的位置现在的实验结果是:可以由layout_width和layout_height设定 5、ScrollView用于设置垂直滚动条...,HorizontalScrollView用于设置水平滚动条:需要注意的是,有一个属性是    scrollbars 可以设置滚动条的方向:但是ScrollView设置成horizontal是和设置成none...重新运行程序,然后不断地点击按钮,就会看到进度条会在显示与隐藏之间来回切换。...修改 MainActivity中的代码,如下所示: public void onClick(View v) {switch (v.getId()) {case R.id.button://每点击一次按钮

    1.6K90

    Android开发笔记(一百六十四)仿京东首页的下拉刷新

    鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...正好ScrollView提供了滚动行为的变化方法onScrollChanged,通过重写该方法即可判断是否到达顶部或底部,重写后的代码片段如下所示:     protected void onScrollChanged...然而成功监听页面是否到达顶部或底部,仅仅解决了状态栏和工具栏的变色问题。因为页面到顶时继续下拉,ScrollView要怎么处理?...不管ScrollView是惊慌失措,还是不知所措,恰恰说明它是真正的束手无策了,为此还要一个和事佬来摆平下拉布局和滚动视图之间的纠纷。...这个和事佬必须是下拉布局和滚动视图的上级布局,考虑到下拉布局在上,而滚动视图在下,故它俩的上级布局继承线性布局LinearLayout比较合适。

    2.9K40
    领券