程序员经验分享-hwhale

滚动时更改网址

2024-02-17

当我单击导航按钮时，我使用 jQuery 更改 URL 哈希。但是当我使用鼠标滚轮滚动时，URL 不会改变。我怎样才能做到这一点？ 如何使用它来完成

window.history.pushState(“object or string”, “Title”, “/new-url”);

我无法理解它。请帮忙 我的 JavaScript 代码

$j(document).ready(function () {
    $j("#start1").click(function (e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $j("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function () {
            window.location.hash = sectionClean;
        });
    });
});
$j(document).ready(function () {
    $j("#start2").click(function (e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $j("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function () {
            window.location.hash = sectionClean;
        });
    });
});

html代码是

<a href="#home" id="start1"style="text-decoration:none;position:absolute;right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;transition:0.5s"  onmouseover="big(this)" onmouseout="small(this)"><span >HOME</span></a>
<span><a href="#products" id="start2" style="text-decoration:none;position:absolute;right:250px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">PRODUCTS & SERVICES</a></span>

这里有一些代码可以帮助你 - 它监听scroll事件，并检查是否有任何anchor元素位于视口中。如果是，则 URL 哈希值将更新为window.history.pushState.

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Scrolling URL Hash</title>
  <meta name="description" content="Webpage for xxxx">
  <style>
    body {
      height: 2000px;
    }
    a > div {
      min-height: 500px;
    }
  </style>
  </head>
  <body> 
  <a href="#anchor1" id="anchor1" class="anchor"><div>ANCHOR 1</div></a>
  <a href="#anchor2" id="anchor2" class="anchor"><div>ANCHOR 2</div></a>
  <a href="#anchor3" id="anchor3" class="anchor"><div>ANCHOR 3</div></a>
  <a href="#anchor4" id="anchor4" class="anchor"><div>ANCHOR 4</div></a>
  <a href="#anchor5" id="anchor5" class="anchor"><div>ANCHOR 5</div></a>
  <a href="#anchor6" id="anchor6" class="anchor"><div>ANCHOR 6</div></a>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
    // stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    function isElementInViewport (el) {
      //special bonus for those using jQuery
      if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
      }
      var rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
      );
    }
    // click-to-scroll behavior
    $(".anchor").click(function (e) {
      e.preventDefault();
      var section = this.href;
      var sectionClean = section.substring(section.indexOf("#"));
      $("html, body").animate({
        scrollTop: $(sectionClean).offset().top
      }, 1000, function () {
        window.location.hash = sectionClean;
      });
    });
    // listen for the scroll event
    $(document).on("scroll", function() {
      console.log("onscroll event fired...");
      // check if the anchor elements are visible
      $(".anchor").each(function (idx, el) {
        if ( isElementInViewport(el) ) {
          // update the URL hash
          if (window.history.pushState) {
            var urlHash = "#" + $(el).attr("id");
            window.history.pushState(null, null, urlHash);
          }
        }
      });
    });
  </script>
  </body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

trycatch

滚动时更改网址 的相关文章

  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在

  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点

  • W3C 验证器：“握手警报：unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u

  • javascript中按tab键时如何调用函数？

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f

  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素？

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有

  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输

  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的

  • 未捕获的错误：找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http

  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试

  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true

  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的

  • 当用户单击链接时，如何记录 MixPanel 事件？

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是

  • :jQuery / Sizzle 中的 nth-of-type()？

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of

  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据

  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz

  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ

  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG

  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012

  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗

  • 用于 C# XNA 的 Javascript（或类似）游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • 如何检索邮件项目 (Outlook.MailItem) 的 Outlook 文件夹？

    我通过以下方式获取默认收件箱文件夹inboxFolder Globals ThisAddIn Application Session GetDefaultFolder Outlook OlDefaultFolders olFolderInb

  • 如何用Google OR工具绘制车辆路径问题解决方案？

    我正在使用 Google OR 工具来解决 Python 中的简单车辆路径问题 我想以类似于 Google 教程的方式绘制求解器返回的解决方案 Google OR Tools 车辆路径问题教程解决方案 https i stack imgur

  • 如何在远程桌面上强制用户注销之前发出公告消息？

    我想在虚拟机关闭之前向用户发布一个公告 背景 1 10个用户登录一台虚拟机 Windows虚拟桌面 Windows 10 2 虚拟机将在晚上10 00关闭 我想在晚上9 55给用户一个公告 让他们知道 3 我想使用任务计划和脚本一起工作来实

  • Linq to Sql - 查找祖先的分层查询

    给定 EmployeeId 如何构建 Linq to Sql 查询来查找该员工的所有祖先 每个 EmployeeId 都有一个关联的 SupervisorId 见下文 例如 查询 EmployeeId 6 Frank Black 的祖先应返

  • 在 UIManager 中找不到 React Native“RNCSafeAreaView”

    我正在 Mac 上运行一个反应本机应用程序 但我在 UIManager 中找不到 RNCSafeAreaView 通过在终端中键入以下命令来更新此模块的版本 npm 安装 电子邮件受保护 cdn cgi l email protection

  • 未解决的依赖关系 sbt-play-ebean

    这是我的插件 sbt addSbtPlugin com typesafe play sbt plugin 2 6 9 addSbtPlugin com typesafe sbt sbt play enhancer 1 2 2 addSbtP

  • 为什么我在 1024 个连接后会出现连接被拒绝的情况？

    我正在本地 Linux 服务器上进行测试 服务器和客户端都在同一台服务器上 在大约 1024 个连接之后 在我的代码中 我连接的地方出现连接被拒绝的情况 起初我以为这是 select 的 fd set max 限制为 1024 并将服务器更

  • 确保类型在 Go 编译时实现接口

    如何确保类型在编译时实现接口 执行此操作的典型方法是无法分配该类型的支持接口 但是我有几种类型只能动态转换 在运行时 这会生成非常粗暴的错误消息 而不会为编译时错误提供更好的诊断 在运行时发现我期望支持接口的类型实际上并不支持接口 这也是非

  • 如何将大小为 X 的 Java 集合分解为 X/Y 集合？

    我有一个 Java Set 特别是 HashSet 假设它的大小为 10k 如何将其分成 5 套 每套尺寸为 2k Guava https github com google guava有用于划分 Iterable 类的库 这可迭代对象 h

  • PyGObject GTK+ 3 - 文档？

    PyGObject 似乎没有真正的文档 本教程 http python gtk 3 tutorial readthedocs org en latest index html已经很接近了 我整个早上都在努力寻找对被接受的论点的描述Gtk W

  • ANTLR4 中是否有相当于“片段”标记的解析器？

    有没有办法告诉 ANTLR4 内联解析器规则 拥有这样的功能似乎是合理的 读完关于 ANTLR 的书后 权威的 ANTLR 4 参考 我还没有发现这种可能性 但是这四年可能已经发生了变化 既然这本书已经出版了 所以我想最好在这里问一下 考虑

  • 如何使用 tf.train.MonitoredTrainingSession 仅恢复某些变量

    如何告诉 tf train MonitoredTrainingSession 仅恢复变量的子集 并对其余变量执行初始化 从 cifar10 教程开始 https github com tensorflow models blob maste

  • 我可以使用 jQuery 淡入背景图像（CSS：background-image）吗？

    我有一个div包含文本和背景图像的元素 通过 CSS 属性设置background image 是否可以通过 jQuery 淡入背景图像 div background repeat no repeat background position

  • 使用当前年份将月日（'%B %d'）日期列解析为日期时间

    我有一个采用以下格式的专栏 Date June 22 June 23 June 24 June 25 我正在尝试将此列转换为 pandas df 中的日期时间 格式为 YYYY mm dd 我怎样才能做到这一点 我能够格式化日期并转换为 m

  • 德尔福64位？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 手动将mysql查询结果缓存到txt文件

    有没有办法手动将mysql查询结果缓存到txt文件中 Ex a 1 b 9 c 0 cache filename cached results md5 a b c txt if file exists cache filename resu

  • ebpf - 根据内核版本使用ringbuf和perfbuf

    我正在使用 ebpf 来捕获进程创建 我对内核 5 8 及更高版本使用ringbuf 并希望在同一 ebpf 内核文件中对旧内核使用 perfbuf 有一个关于它的很棒的博客https nakryiko com posts bpf core

  • 无法使用 html 文本框登录

    因为我使用html按钮和文本框来登录 所以我必须在源代码中的javascript中执行后面的代码才能执行后面的代码 无论我使用正确的用户名和密码 Admin 和 123 登录并单击登录按钮 还是不输入任何内容并单击登录按钮 它总是将我重定向

  • 如何删除文件中的第一行？

    我无法搜索特定的字符串 因为它们都非常相似 但我想要一些简单的方法来删除文件中的前 4 行 它们的长度也都是可变的 我考虑过 Perl 这一切似乎比我想象的要难 但如果可能的话 我想用 Perl AWK 或 shell 命令来完成 有人有一

  • 滚动时更改网址

    当我单击导航按钮时 我使用 jQuery 更改 URL 哈希 但是当我使用鼠标滚轮滚动时 URL 不会改变 我怎样才能做到这一点 如何使用它来完成 window history pushState object or string Titl

热门标签