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

我可以在没有网页滚动的情况下更新window.location.hash吗?

当然可以。在不触发网页滚动的情况下,您可以使用 JavaScript 的 window.history.pushState() 方法来更新 window.location.hash

以下是一个示例代码:

代码语言:javascript
复制
function updateHashWithoutScrolling(newHash) {
  // 保存当前滚动位置
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

  // 更新 hash
  window.location.hash = newHash;

  // 恢复滚动位置
  window.scrollTo(scrollLeft, scrollTop);
}

// 使用示例
updateHashWithoutScrolling('#new-hash');

这个方法首先保存当前页面的滚动位置,然后更新 window.location.hash,最后使用 window.scrollTo() 方法将页面滚动回原来的位置。这样就可以在不触发滚动的情况下更新 window.location.hash 了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有资格骂Seurat更新

pwd=3heo,而且也有海量配套视频教程b站,视频号等渠道,基本上大家能看到中文笔记都是我们分享。。。。...但是,表明态度多个推文里面都被“匿名者”阴阳怪气怼了一下,说这样写教程(英文教程搬运工)渣渣没有资格骂开发者。。。...它通过测量单个细胞中基因表达水平来揭示细胞基因表达层面的异质性。...10x技术,其它都可以入门学习过程中忽略掉。...最后为什么是Seurat一家独大呢 大胆推测,就是因为我们生物信息学自媒体推广,我们大力宣传生物信息学入门编程语言是R语言,虽然说基于R语言单细胞转录组数据分析也有大量其它类似于Seurat流程

28410

JavaScript中location.hash详解「建议收藏」

/username 印象中,这是主流网站第一次将”#”大规模用于直接与用户交互关键URL中。这表明井号(Hash)作用正在被重新认识。...浏览器读取这个URL后,会自动将print位置滚动至可视区域。 为网页位置指定标识符,有两个方法。...  Host: www.example.com 可以看到,只是请求index.html,根本没有”#print”部分。...color=%23fff 四、改变#不触发网页重载 单单改变#后部分,浏览器只会滚动到相应位置,不会重新加载网页。...八、Google抓取#机制 默认情况下,Google网络蜘蛛忽视URL#部分。 但是,Google还规定,如果你希望Ajax生成内容被浏览引擎读取,那么URL中可以使用”#!”

40930

腾讯面试四问,Are you OK?

页面通信不太熟了吗,不就 url 传参; 同域情况下本地缓存也可以存值传递; 真的是这样?还有没有其它? 再仔细审题。要求是:新打开 B 页面关闭(包括意外崩溃)如何传回给 A 页面。...答:我们可以使用 Service Worker 来实现网页崩溃监控(也许你听说过 Web worker,二者区别你知道?挖个坑,之后填。)。...Service Worker 有自己独立工作线程,与网页区分开,网页崩溃了,Service Worker 一般情况下不会崩溃; Service Worker 生命周期一般要比网页还要长,可以用来监控网页状态...正常关闭时候通知 Service Worker 清除这个状态。 如果网页 Crash 了,running 将不会被清除,且时间戳也不会再更新。...知道你知道:懒加载核心:不在可视区域资源可以延迟加载。 你非常棒,知道可以使用监听滚轮,甚至还知道采用节流来防止函数被高频触发。 还有其它? 除了监听滚轮,还有呢?

8910

操作滚动条小结:scrollIntoViewanimate等方法来龙去脉

操作滚动可以通过锚点跳转,JS操作滚动条,与scrollIntoView等方法。对此,来考古一下。...锚点跳转滚动滚动网页锚点跳转是HTML早期功能之一,锚点(anchor)跳转是1991年发布HTML标准一部分,这是超文本链接基本特性。...1995年浏览器有JavaScript 功能,可以通过JavaScript 手动更爱hash进行跳转window.location.hash="section1"JavaScript操作滚动条,还是不尽人意操作滚动滚动...scroll和scrollTo现代浏览器中都支持// 使用scrollTo滚动页面到指定位置(100px, 100px)window.scrollTo(100, 100);// 使用scroll执行相同操作...,需要计算滚动位置,如果是嵌套套娃,就非常复杂——可以复习下:《再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX》这个方法,劝读者放弃!

22410

react-router 环境使用锚点方法

锚点是通过界面中增加一些特征(比如 id),然后 URL 地址后面加上 #id 就可以访问到指定页面的指定位置,这样可以让我们快速跳转到页面的某个位置,但是 react-router 中这种方法遇到了问题...针对这个问题, react-router 一个 issue 中大家也展开了激烈讨论。以下是看过以后整理几种解决办法。...只有某些页面需要 当只有某些页面需要使用锚点时候,可以访问到该页面后使用 react 生命周期中 componentDidMount 阶段来判断 # 后面的字符串,然后使用 dom 操作取到这个字符串所属...dom,然后滚动到该位置。...拿到 # 后面的 id 并找到指定 dom,然后滚动到该 dom 位置。

1.8K40

react-router 环境使用锚点方法

锚点是通过界面中增加一些特征(比如 id),然后 URL 地址后面加上 #id 就可以访问到指定页面的指定位置,这样可以让我们快速跳转到页面的某个位置,但是 react-router 中这种方法遇到了问题...针对这个问题, react-router 一个 issue 中大家也展开了激烈讨论。以下是看过以后整理几种解决办法。...只有某些页面需要 当只有某些页面需要使用锚点时候,可以访问到该页面后使用 react 生命周期中 componentDidMount 阶段来判断 # 后面的字符串,然后使用 dom 操作取到这个字符串所属...dom,然后滚动到该位置。...拿到 # 后面的 id 并找到指定 dom,然后滚动到该 dom 位置。

2.9K20

什么是单页面应用开发工具_单页面和多页面的区别及优缺点

大家好,又见面了,是你们朋友全栈君。...单页面应用开发 MPA与SPA简介 MPA MPA (Multi-page Application) 多页面应用指就是最传统 HTML 网页设计,早期网站都是这样设计,所之称为「网页设计」。...如果使用这样设计 Web App 中,使用者体验比较差,整体流畅度扣分。但进入门槛低,简单套个 jQuery 就可以完成。...SPA SPA (Single-page Application) 顾名思义 Web 设计上使用单一页面,利用 JavaScript 操作 Dom 技术实现各种应用,现今介面上算是非常受欢迎设计...,搭配 AJAX 使得整体页面反应速度相当迅速,配合上路由懒加载等手段可以达到Native应用体验。

76830

前端路由0.前言1.哈希路由2.history路由

0.前言 后端有后端路由,根据路由返回特定网页,代表者是传统mvc模式,模板引擎+node。前端也有前端路由,我们用三大框架做spa时候,总是和路由离不开关系。...通过location.hash可以取到该值,常见返回顶部也可以利用href=‘#’。改变#后面的内容不会引起页面重新刷新,但是会有历史记录,所以可以后退。...这对于ajax应用程序特别有用,可以用不同#值,表示不同访问状态,然后向用户给出可以访问某个状态链接。但是IE 6和IE 7不会有历史记录。#后面的内容不会提交到服务器。...对于前端路由,我们有一个事件可以利用,onhashchange,监听哈希变化然后执行相应回调函数。...既然不会触发页面更新,那么也不会发送http请求,就有了一个问题:如果直接输入url,后端又没有对应url处理的话,那肯定是404,而哈希路由则可以直接输入 url直接定位到某个视图。

64320

前端路由

0.前言 后端有后端路由,根据路由返回特定网页,代表者是传统mvc模式,模板引擎+node。前端也有前端路由,我们用三大框架做spa时候,总是和路由离不开关系。...通过location.hash可以取到该值,常见返回顶部也可以利用href=‘#’。改变#后面的内容不会引起页面重新刷新,但是会有历史记录,所以可以后退。...这对于ajax应用程序特别有用,可以用不同#值,表示不同访问状态,然后向用户给出可以访问某个状态链接。但是IE 6和IE 7不会有历史记录。#后面的内容不会提交到服务器。...对于前端路由,我们有一个事件可以利用,onhashchange,监听哈希变化然后执行相应回调函数。...既然不会触发页面更新,那么也不会发送http请求,就有了一个问题:如果直接输入url,后端又没有对应url处理的话,那肯定是404,而哈希路由则可以直接输入 url直接定位到某个视图。

38310

WEB前端架构(三)

先跟关注各位说声抱歉,快一周没更新了。 实在是因为太忙了,最近周末忙装修事,周内又要加班。 因为是新公司嘛,本来就忙,三天前又被临时抓去写一个手机微信上用购物车。。...也是忙有点脑抽了,拿着图顺着操作步骤就写下去了,到后来才发现,这不就是一步一步面向过程写法了么, 所有的操作全都纠缠在一起,数字和操作用变量到处传来传去, 结果毫无意外写成了一坨屎。...来指定页面的链接,就这样: xxx.xxx.com/index.html#product 用window.location.hash读取#后面的值 然后写了一个goto方法, goto( '要去页面名...因为你load网页进来时,整个网页其实已经加载完成,事件都绑定完了,你再load进来dom节点,当然就没有事件可绑定了。...然后config.js里用switch写了个路由方法,来指定页面的跳转 大意就是 获得hash值, switch(hash) { case 'product': $.load('product.html

631100

简易路由实现——(hash路由)

Hash(即#)是 url 锚点,代表网页一个位置,仅仅改变#后面部分,浏览器只会滚动对应位置,而不会重新加载页面。 Hash仅仅只是对浏览器进行指导,而对服务端是完全没有作用!...它不会被包括 http 请求中,故也不会重新加载页面。同时 hash 发生变化时,url 都会被浏览器记录下来,这样你就可以使用浏览器后退了。...name, 操作对应 dom 元素使其显示或隐藏 refresh() { if (this.frontOrBack) { // 前进后退造成路由变化,此时不需要改变routeHistory...= this.currentUrl; } } push(option) vue-router中,可以通过 path, name 修改当前路由,并且可以携带 query 参数 因此优先判断...+ str.slice(1))) || (window.location.hash = path); } else { window.location.hash

1.1K20

iframe 自适应高度多种实现方式

大家好,又见面了,是你们朋友全栈君。 iframe高度自适应内容 需求:实现 iframe 自适应高度,能够随着页面的长度自动适应以免除页面和 iframe 同时出现滚动现象。...设置iframe 自适应高度,使其等于内嵌网页高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。...如果内容是固定,那么我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化时候。这个时候又有几种情况了。...一、iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认cssmin-height值,然后同时使用JavaScript改变高度。...二、多个iframe情况下 //输入你希望根据页面高度自动调整高度iframe名称列表 //用逗号把每个iframeID分隔.

6K30

ajax实现简单点击左侧菜单,右侧加载不同网页

实现:ajax实现点击左侧菜单,右侧加载不同网页整个页面无刷新情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带服务器中打开浏览效果即可) 图片.png 原理...遇到ajax局部刷新需求也有很多,有时候比较简单,当内容较少,适合做成选项卡,如果网页左侧有一个列表,点击列表使右侧内容进行切换,如果右侧内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了...,项目中经常使用到流程管理后台,便是左右结构布局,这个时候,简单demo示例如下 <!...window.location.hash = sId; //设置锚点 loadInner(sId); });...function loadInner(sId) { var sId = window.location.hash;

3.3K50

从vue-router源码中看前端路由两种实现

大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,不重新请求页面的情况下更新页面视图。...“更新视图但不重新请求页面”是前端路由原理核心之一,目前浏览器环境中这一功能实现主要有两种方式: 利用URL中hash(“#”) 利用History interface HTML5中新增方法..., false) 每一次改变hash(window.location.hash),都会在浏览器访问历史中增加一个记录 利用hash以上特点,就可以来实现前端路由“更新视图但不重新请求页面”功能了。...而history模式则会将URL修改得就和正常请求后端URL一样 http://oursite.com/user/id 在此情况下重新向后端发送请求,如后端没有配置对应/user/id路由处理,则会返回...或者,如果是用 Node.js 作后台,可以使用服务端路由来匹配 URL,当没有匹配到路由时候返回 404,从而实现 fallback。

1.6K30

今天有人问我可以直接离线一个完整网站?有没有什么工具之类推荐一款:Httrack (网站复制机)案例:离线你博客园

搞安全朋友这款工具可能用比较多,毕竟信息收集阶段还是很必须,这篇文章主要讲一下离线你博客园案例 官网:http://www.httrack.com/ 里面有windows,linux,Android...等等几个版本 先简单介绍一下,具体可以自己摸索一下 一、windows下 安装很简单就不说了,讲下简单使用(里面有简体中文) ?...新建一个工程名,最好是英文,选择一下存放路径(分类可以不选) ? 设置要离线网站地址(可以设置一些参数)随意演示一下,你们保持默认即可 ? 准备阶段结束 ? 开始离线了~等就ok了 ?...其实可以看出博客园一些结构 ? 效果: ? ? ? 补充:发现自己深度没调节好,可以继续更新镜像 ?...二、linux下(只介绍下简单使用,结合使用后面会讲解) 如果没有可以去官网下载,下面以kali linux演示(内置) 如果你kali里面没有的话:apt-get install webhttrack

1.9K40

【面试题】hash 与 history 路由实现原理

使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样元素位置,故而又称之为锚点。...hash还有另一个特点,它改变不会导致页面重新加载,因此单页应用流行的当下,它用处就更多了。通过window.location.hash属性获取和设置hash值。...window.location.hash变化会直接反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值变化也会触发window.location.hash变化,从而触发onhashchange...更新页面而不发送 http 请求 2. 使用 history 模式时,需要通过服务端来允许地址可访问 3....window.history对象,该对象上包含有length和state两个值,__proto__上继承有back、forward、go等几个功能函数 popstate之前,我们可以利用back

1.3K10

原生 js 实现一个前端路由 router

Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果,而且也不会报错。 History.forward() 浏览器历史记录里前往下一页,用户可点击浏览器左上角前进按钮模拟此方法....当整数参数超出界限时 ( 译者注:原文为 When integerDelta is out of bounds ),例如: 如果当前页为第一页,前面已经没有页面了,传参值为 -1,那么这个方法没有任何效果也不会报错...但是浏览器中主要有这几个限制: 没有提供监听前进后退事件 不允许开发者读取浏览记录 用户可以手动输入地址,或使用浏览器提供前进后退来改变 url 所以要自定义路由,解决方案是自己维护一份路由历史记录...这个浏览记录需要存储 sessionStorage 中,这样用户刷新后浏览记录也可以恢复。...route 博客常更地址1 :https://github.com/biaochenxuying/blog 博客常更地址2 :http://biaochenxuying.cn/main.html 足足一个多月没有更新文章了

2.5K10
领券