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

js点击按钮返回页面顶部

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

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

    小程序点击A页面转到B页面对应事件

    下面的内容主要是总结一下小程序点击A页面转到B页面对应事件。 效果描述: 小程序点击A页面的“通知公告”板块,跳到B页面的“通知公告”tab栏。...效果如图所示 A页面 B页面 1.A页面源代码 以上这段代码它很好的优化了代码,这样写的好处就是简洁不冗余,可读性也挺强的,值得学习。...以前我的做法是写出每个小块再分别添加点击事件,因为用来for循环能写出静态页面,但是里面的事件不知道怎么分别加上去,其实很简单。...只要点击方法里面加个item,再写这个方法的时候带e这个参数,里面加判断条件,就能达到你想要的。...props它是代表从A页面接收过来,让B页面的导航等于A页面点击方块。

    13710

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

    2000px;"> 2 3 回到顶部...scrollTo(0,0); 6 } 7 8 4.scrollBy():scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量,只要把当前页面的滚动长度作为参数...如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。...如果没有提供该参数,默认为true,使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果...【1】显示增强 使用CSS画图,将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器,则用图片代替) 使用CSS伪元素及伪类hover效果,当鼠标移动到该元素上时,显示回到顶部的文字

    2.6K30

    全代码打造简洁美观回到顶部按钮

    这次,潜行者m给大家带来一个比较实用的 jQuery 技巧,为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。...这个按钮的效果就是,当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部点击之后就会跳转到顶部,然后这个按钮平滑消失。...jQuery 代码 具体的 jQuery 代码如下,解析已经写在注释里面了: $(function(){ $(window).scroll(function(){  //只要窗口滚动,就触发下面代码...fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动   } }); $("#gotop").click(function(){ //当点击标签的时候...,使用animate在200毫秒的时间内,滚到顶部 $("html,body").animate({scrollTop:"0px"},200); }); }); 怎么样,简单吧?

    79730

    前端开发者都应知道的 jQuery 小技巧

    在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 Ajax 调用的错误处理 链式操作 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法...然后你要做的就是,设置在 800 毫秒内回到顶部。...Hover 上的 Class 切换 如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。...$('input[type="submit"]').prop('disabled', false); 停止链接加载 有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情...但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作: // Fade $('.btn').click(function () { $('.element').fadeToggle

    2.3K30

    微信小程序 转发、分享、预览

    胶囊按钮分享胶囊就是右上角的个位置的,可以看到小程序分享按钮和分享到朋友圈按钮 默认是禁用灰色的,需要配置对应的api分享好友要想开启分享功能,需要设置onShareAppMessage方法,这个方法会监听用户点击页面内转发按钮...满足上述两个条件的页面,才可被分享到朋友圈需要注意的是:用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,“单页模式” 需要注意以下问题:页面顶部固定有导航栏...底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面顶部导航栏与底部操作栏均不支持自定义样式。...默认运行的是小程序页面内容,但由于页面固定有顶部导航栏与底部操作栏,很可能会影响小程序页面的布局。因此,请开发者特别注意适配“单页模式”的页面交互,以实现流畅完整的交互体验。...不允许跳转到其它页面,包括任何小程序页面其它小程序、微信原生页面不允许横屏使用若页面包含 tabBar,tabBar 不会渲染,包括自定义 tabBar本地存储与小程序普通模式不共用如图这个是从朋友圈打开的页面图片图片图片实现代码如下

    88540

    微信小程序转发朋友圈详解

    以下是微信官方对于“单页模式”的描述: “单页模式”下,页面顶部固定有导航栏,标题显示为当前页面 JSON 配置的标题。底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。...顶部导航栏与底部操作栏均不支持自定义样式。 “单页模式”默认运行的是小程序页面内容,但由于页面固定有顶部导航栏与底部操作栏,很可能会影响小程序页面的布局。...限制主要包括以下几点: 页面无登录态,与登录相关的接口,如 wx.login 均不可用 不允许跳转到其它页面,包括任何小程序页面其它小程序、微信原生页面页面包含 tabBar,tabBar...前文微信官方对“单页模式”的描述有说到“顶部导航栏与底部操作栏均不支持自定义样式”。如果我们在原页面设置了自定义导航栏。那么“单页模式”样式就会变成这样: ?...第一步在需要转发朋友圈的页面中注册用户点击右上角转发功能,这是实现转发朋友圈功能的必要满足条件。

    4K20
    领券