js返回页面顶部】的更多相关文章

第一次写博客,不太专业,废话不多说,直接上自己早上做的东东.有不足之处,希望指点. css: body{counter-reset: p;} p{width: 100px;margin: 20px 0;font: normal 40px/1.5 Arial;text-align: center;border: 1px solid #ccc;} p:before{content: counter(p);counter-increment: p;} .scrollTop,.scrollBottom{…
本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最简单,点击后会在地址栏显示这个锚标记. 需要标记id特麻烦,尤其是每个页面都要使用,顶部展示又不一样. 页面顶部放置: <a name="top" id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠…
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".go-top").click(function () { $(d…
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路由发生变化时会记住原路由的状态,跳转新页面后默认停留在原页面的位置. 解决方法 使用 withRouter: withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入.无需一级级传递react-router 的属性,当需要…
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop.png" alt="" class="gotop" > <div class="gotopdiv" style="display: none;"><span>返回顶部</span&g…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 400px; } </style> </head> <body> <p>?</p> <a href=&quo…
<p id="back-to-top"> <span></span> </p> <script type="text/javascript"> $(function() { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function() { $(window).sc…
本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 font-size: 400px; 9 }…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 400px; } </style> </head> <body> <p>?</p> <a href=&quo…
Response.Write 与   Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptBlock 之间的区别 方法1,使用Response.Write,这种方法会把JS代码写在页面的最顶部(<html>的前面):System.Web.HttpContext.Current.Response.Write("<script language=javascript>a…
只修改了2个地方: 1,返回的速度-->改成了慢慢回去.(原来是一闪而返回) 2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS务必要写在 Html之后: HTML: <div id="d-top" style="display:none;"> <a id="d-top-a" href="#" title="回到顶部"…
1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始不显示*/ position: fixed; right: 25px;/*距离右边大小值*/ bottom: 45px;/*距离底部大小值*/ /*选定图片区域*/ background-image: url(images/qqbg_1.5.5.png); background-repeat: no…
跳出 iframe 在当前页跳转, window.parent.frames.location.href=www.baidu.com" 跳转页面 onclick="history.go(-1)"…
一.滚到顶部,且滚动中,用户滚动鼠标无效 <style> .div1, .div2, .div3, .div4 { height: 400px; width: 400px; } .div1 { background: #eea7cf; } .div2 { background: #a95ee1; } .div3 { background: #c57cad; } .div4 { background: #790d86; } .fixed-tool { position: fixed; top:…
<div id="toTop" style="width:30px;height:110px;border:1px solid #74B9DC; border-radius:5px; background-color: #74B9DC;text-align:center;padding-top:20px;position:fixed;top:350px;right:20px;cursor:pointer;display:none;font-size:18px;"…
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(top){ if (document.compatMode == "BackCompat") { document.body.scrollTop = top; } else { if(document.documentElement.scrollTop == 0){ document.bod…
var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ 'scrollTop':0 },200); }); 核心代码: $("#id").animate({scrollTop:0},200) 适用场景: <div class="moreRomm" style="background-color:#4990e…
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了.例如,某些元素是在某种情况下才加上的,又或者多级定位. 目前,我知道的返回定位到具体位置有两种方法: ①利用id定位,在跳转的时候带上某个模块的id,返回的时候定位到该处. ②利用距离顶部的距离,在跳转的时候带上当前位置滚动过的距离,返回的时候定位到该处. 一般应用场景: 定位到某一个模块的时候,有…
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch…
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to-top").length === 0) { var f = "<div class='j-to-top' style='display: none; position: fixed; bottom: 108px; right: 0; width: 42px; height: 42px…
一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下:  代码如下 复制代码 <a name="top" id="top"></a> 然后,在网页底部放一个访问链接即可:  代码如下 复制代码 <a href="#top" target="_self">返回顶部</a> 此方法效果是一次直接跳到顶部,而且URL地址栏会显示个#top,追求完美的可使用下面方法…
这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 ? 1 2 3 4 <body style="height:2000px;">…
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; display:block;"> 上升按钮 </div> </body> </html> JS: $(function(){ //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(fun…
[导读] 要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中,下面我来给大家先介绍js 返回前一页并刷新页面,然后再把这些代码放在php中实现删除后返回当前页面并刷新页面.... JS 重载页面,本地刷新,返回上一页 代码如下 1 2 3 <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()"…
高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(DateTime),这样我们将时间信息与GUID组合起来,在保留GUID的唯一性的同时增加了有序性,以此来提高索引效率,在NHibernate中,COMB型主键的生成代码如下所示: /// <summary> /// 保留GUID的10个字节,用另6个字节表示GUID生成的时间(DateTime)组…
JS 重载页面,本地刷新,返回上一页 : <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()">重载页面,本地刷新</a> <a href="javascript:history.go(-1);location.reload()">返回上一页重载页面,本地刷新</a&…
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名设置为top的话,就出错,都是小坑. 我们知道可以利用a标签的#回到顶部效果,但是速度过快,导致用户体验不是太好,这里,可以利用JS实现回到顶部的效果: 这是最终些的代码,感觉代码过于冗余,后面想办法完善下.…
1.JS跳转路由(需要拿到父组件的history) clickHandle(){ let history = this.props.history; history.push( '/home') } 2.刷新页面(需要拿到父组件的history) clickHandle(){ let history = this.props.history; history.go(0) } 3.返回页面 clickHandle(){ window.history.back( ) }…
最近在Apache上做网站的静态资源缓存,但是各种配置之后,发现css和js返回的状态码都是200,为什么不是304? 找来找去在知乎上得到了答案. 来自知乎的一个回答 http://www.zhihu.com/question/35036322 apahce 2.4本身的一个bug.apache2.4同时使用gzip压缩和缓存,etag名字会自动变成“******-gzip”,当存在gzip时就会出现问题.可以在http.conf中添加 <IfModule mod_headers.c> &l…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回至顶部</title> <style type="text/css"> * { margin: 0; padding: 0; } #top { width: 50px; height: 50px; background-c…