单击锚链接时保持 URL 不受影响

2023-12-31

我已经检查过这里的其他帖子,没有我正在寻找的结果。 我想点击

<a href="#about">About</a>
<div id="about">Content of this..</div>

并让它滚动到该元素,而不将 www.domain.com/#about 放入地址栏中

作为一个完美的例子,请查看我发现的这个网站here http://thinkpixellab.com然后单击一些链接——单击时它们不会更改地址栏。


您可以使用 javascript 和 jquery 执行您想要的操作,如下所示(请注意,这是使用旧版本的 jquery):

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <script type='text/javascript'>
    jQuery(document).ready(function($) {

        $(".scroll").click(function(event){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
        });
    });
    </script>
</head>
<body>
    <a class="scroll" href="#codeword">Blue Words</a>
    <div id="codeword"></div>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击锚链接时保持 URL 不受影响 的相关文章

  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • W3C 验证器:“握手警报:unrecognized_name”

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

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • XHTML 和 HTML 类属性值可以以数字开头吗?

    XHTML 和 HTML 类属性值可以以数字开头吗 No 它们必须是 SGML 名称 http www w3 org TR REC html40 types html type cdata它们 必须以字母 A Za z 开头 后跟任意数量的
  • 博客上的随机背景图片

    我正在尝试整理某种代码 以随机化我的博主博客上的背景图像 我的编程技能不足 但我愿意尝试建议 我记得在 WordPress 中实现了类似的功能 通过将 php 代码文件存储在图像文件夹中 然后从 CSS 中调用该 php 文件 就像它是图像
  • LinkedIn 共享网站时不获取元数据

    我在 LinkedIn 上共享正在处理的网站时遇到问题 LinkedIn 不会从该页面获取任何数据 该网站的元数据遵循以下建议他们的文档 https help linkedin com app answers detail a id 466
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • html 中的输入字段可以有多少个字符?

    html 输入字段中允许的 自然 字符数是多少 多谢 根据评论添加 我不需要通过邮寄或获取将其发送到服务器 我将通过 JS 解析字符串 因此 如果输入是无限的 就像 sAc 所说 这会给我带来两个进一步的问题 JS 最长的 String 可
  • 上传图像 onclick 多个蒙版图像

    一旦用户单击蒙版图像 我们就允许用户上传自定义图像 如果有单个蒙版图像 则效果很好 https codepen io kidsdial pen jJBVON https codepen io kidsdial pen jJBVON 要求 但
  • UL 标签内的标签 H3 [重复]

    这个问题在这里已经有答案了 可能的重复 UL 中是否允许除 LI 之外的任何内容 https stackoverflow com questions 6056142 is anything except lis allowed in a u
  • jQuery .val() 返回单选按钮的未定义

    我正在尝试获取 jQuery 中选中的单选按钮值 但它返回的值是 未定义 我搜索了这个问题的解决方案 但对我来说没有任何作用 我的 HTML 代码
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • html5 输入模式属性在表单之外不起作用?

    这把小提琴 http jsfiddle net 2gaw3 按预期工作 当用户输入无效的国家 地区代码时 它会显示警告 这另一个小提琴 http jsfiddle net y66vH 4 没有form元素 不起作用 看来输入的pattern
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • 默认情况下,JSF 生成不可用的 ID,这些 ID 与 Web 标准的 CSS 部分不兼容

    活跃的 JSF 或 Primefaces 用户能否解释一下为什么默认情况下会发生这种情况 为什么没有人对此采取任何措施
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 使用 html5 分块上传文件

    我正在尝试使用 html5 的文件 API 分块上传文件 然后在服务器端用 php 重新组装它 我正在上传视频 但是当我在服务器端合并文件时 大小增加了 并且它变成了无效文件 请注意 以下 html5 代码仅适用于 chrome 浏览器 在

随机推荐