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

js点击按钮返回页面顶部

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

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

    关于Firefox中链接点击弹出空白标签页的问题分析

    前言 昨天突然有好心人提醒我说我的网站某些链接在firefox中打开时会弹出 about:blank 的空白页面。本来自己在测试的时候没怎么考虑浏览器的兼容问题,毕竟自己总共也没写几个标签。...javascript:void(0);" target="_blank" onclick="somefunction()">haha 我希望这是一个标签页,为了好看就继承了a标签的样式,而且自己定义了点击事件...,不过为了避免链接跳转就在href里用"javascript:void(0);"来阻止页面跳转。...这行简单的代码在chrome里没有问题,不过在 firefox 中如果点击这个标签就会立刻弹出一个 about:blank 的空白标签页,非常的不友好。...比如说,我们认为a标签代表了用户的链接跳转的操作,那么我们就可以相信这肯定对应了一个url,那么我们就可以在浏览器的功能强化中加上一个新功能就是支持用户将这个链接拖动到地址栏以打开新链接

    1.6K20

    用A标签实现页面内容定位 点击链接跳到具体位置

    经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了。实例参考微信营销理论手册的目录。   ...首先用A标签定义目录的链接。...互动    然后在具体位置调用A标签,本例位置在“※ 微信营销之互动 ※”    保存,刷新,测试一下,点击目录链接是不是可以跳到那个位置了...用A标签实现页面内容定位,点击链接就能跳到具体位置,简单吧?   w3school对【HTML 链接 - name 属性】的定义 name 属性规定锚(anchor)的名称。...当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。 ?

    1.2K40

    JS简单页面交互实战 - 点击按钮实现求和功能

    上一期堡堡给大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到“HTML5学堂”公众号。...而今天我们主要讲解JS简单页面交互实战 - 点击按钮实现求和功能。 Tips:由于上一期的文章篇幅过长,微信的文章有字数要求,所以小编把部分的内容(作用域)放到这一期进行讲解。...本文内容概要 1 点击按钮实现求和的效果图 2 实现页面交互效果的思路 3 用自己的语言进行功能的描述 4 仔细查看功能,并根据基本功能构建结构样式 5 细化功能描述并转换为JS语言或命令 6 JS具体编码以及代码优化...2 实现页面交互效果的思路 ——>用自己的语言进行功能的描述 ——>仔细查看功能,并根据基本功能构建结构样式 ——>细化功能描述并转换为JS语言或命令 ——>JS具体编码以及代码优化,回顾成品代码 Tips...我们来想一个问题,假如页面中出现了多个点击按钮实现求和功能,你是把代码复制黏贴一遍还是进行代码的封装?

    17.6K80

    使用新H5标签,实现点击按钮显示分享链接弹出层交互功能

    本篇文章将通过一个实际案例,展示如何使用标签、JavaScript和CSS来创建一个用户友好的分享链接功能。...案例展示 首先来看一下效果视频展示: 功能描述 这个分享链接功能实现了以下几种操作: 打开分享弹窗:用户点击“分享”按钮后,弹出一个对话框,显示链接和复制按钮。...复制链接:在对话框中,用户可以点击“复制链接”按钮,将链接复制到剪贴板。 关闭弹窗:用户可以点击弹窗右上角的关闭按钮,关闭弹窗。 源码分析 HTML结构 HTML部分主要包括一个按钮和一个模态框。...button> CSS样式 为了让页面更美观,我们需要为模态框和按钮添加一些样式。

    37910

    springboot+security 使用layui弹出弹出jsp页面

    一、坑的描述 踩坑原因:因为使用layui需要弹出一个页面,后台权限使用的是security,弹出层需要请求后台返回逻辑视图名。...当我点击完之后返回页面一片空白,打开控制台,显示请求路径为404,异常如下: ? 打开控制台可以看到一下错误信息: ?...二、解决问题 这是因为security不允许使用嵌套页面,即使本地访问依然不允许,我们需要在security配置类中加如下代码结局问题。...public void configure(HttpSecurity http) throws Exception { //释放静态资源,指定资源拦截规则, // 指定自定义认证页面....disable()//关闭csrf(跨域伪造请求) .headers()//请求头设置 .frameOptions()//允许嵌套页面

    2.1K20

    Selenium Webdriver之点击图像链接

    访问图片链接 图像链接是Web页面中由图像表示的链接,当点击该图片(链接)时,将导航到另一个窗口或页面。...因为它们是图像,所以我们不能使用By.linkText()和By.partialLinkText()方法,因为图像链接基本上没有链接文本。...在下面的示例中,我们将访问Baidu搜索内容之后页面上的Baidu徽标,点击之后将回到百度主页面,在日常工作中很容易遇到这样的情况,一般都是出现产品的Logo或者公司的Logo,点击之后就会返回产品能够主页面或者公司主页面...,上面的百度是一个,再比如淘宝网,京东等等,所有的页面都会有Logo图,都可以再点击之后回到主页。...元素以及定位 我们将使用By.cssSelector和元素的“title”属性来访问图像链接。然后我们将验证点击之后是否会跳转到对应的页面上。

    2.4K10
    领券