anchor 相关问题

如何解决Divi（WordPress）锚链接问题

我已在页面上设置 Divi 锚链接，但这些链接未按预期工作。锚链接仅将页面移动到顶部，但不会移动到特定部分。自己看：http://ryanr179.sg-host...

端线锚点，$，行为不符合预期

我有这个代码来处理 Windows 中的配置文件： 我有这个代码来处理 Windows 中的配置文件： <?php $config = '[log] log_writers[] = "file" log_writers[] = "screen" [General] maintenance_mode = 0 enable_browser_archiving_triggering = 0 enable_sql_optimize_queries = 0 force_ssl = 1'; echo preg_match_all( '/^maintenance_mode[ \t]*=[ \t]*\d$/m', $config ); 回波显示 0 https://onlinephp.io/c/51407 将正则表达式更新为： echo preg_match_all( '/^maintenance_mode[ \t]*=[ \t]*\d\s$/m', $config ); 达到预期效果1 为什么？？ 我什至在 regex101 中验证了我的理智 https://regex101.com/r/CIxCkN/1 本地测试环境： RHEL 7 PHP 5.6.25 PCRE v8.32 2012-11-30 和 Windows Server 2022 PHP 8.2.7 PCRE v10.40 2022-04-14 每个评论请求： var_dump(base64_encode($config)); 字符串（240）“W2xvZ10NCmxvZ193cml0ZXJzW10gPSAiZmlsZSINCmxvZ193cml0ZXJzW10gPSAic2NyZWVuIg0KDQpbR2VuZXJhbF0NCm1haW50ZW5hbmNlX21vZGUgPSAwDQplbmFib GVfYnJvd3Nlcl9hcmNoaXZpbmdfdHJpZ2dlcmluZyA9IDANCmVuYWJsZV9zcWxfb3B0aW1pemVfcXVlcmllcyA9IDANCmZvcmNlX3NzbCA9IDE=" var_dump(bin2hex($config)); 字符串（358）“5b6c6f675d0d0a6c6f675f777269746572735b5d203d202266696c65220d0a6c6f675f777269746572735b5d203d202273637265656e220 d0a0d0a5b47656e6572616c5d0d0a6d61696e74656e616e63655f6d6f6465203d20300d0a656e61626c655f62726f777365725f617263686976696e675f 74726967676572696e67203d20300d0a656e61626c655f73716c5f6f7074696d697a655f71756572696573203d20300d0a666f7263655f73736c203d203 1" 一个答案是您的字符串（或通常的脚本）具有 Windows 行结尾。 在多行模式下，\d$仅匹配数字后跟一个立即换行符（由PCRE的编译时设置确定），如果其中隐藏了\r，则可能无法工作。 在正则表达式末尾添加 \s 将匹配所有行结束字符，这解释了为什么这对受影响的测试环境有帮助。 对于修复（除了您已经找到的 \s 添加之外），PCRE 允许您使用字符串开头的修饰符来调整哪些字符匹配为换行符，例如(*ANYCRLF)： // Force Windows line-ending <?php $test = "foo\r\nbar"; var_dump(preg_match_all('/^foo$/m', $test)); var_dump(preg_match_all('/(*ANYCRLF)^foo$/m', $test)); int(0) 整数（1） 请参阅 https://3v4l.org/vOUgM 进行演示，并参阅 PCRE 文档的 换行约定部分了解一些详细信息。 或者，只需在字符串中使用 PCRE 在本地期望的换行符。 更一般地说，如果您实际上正在尝试解析问题中的字符串/文件，那么 array_key_exists 和 parse_ini_string/parse_ini_file 的组合将使一切变得更加清晰。 你的配置文件确实有windows-newlines \r\n，你的bin2hex 5b6c6f675d0d0a的第一部分翻译成[log]\r\n，这意味着@iainn的预感是正确的:) 尽管如此，我还是会把正则表达式写成 '/^维护模式\s*=\s*(\d)\s*$/m' 这样会更健壮，所以写成这样也没关系 maintenance_mode=5 或 maintenance_mode =5 或 maintenance_mode= 5 或 maintenance_mode = 5 ，无论您使用空格还是制表符，也无论您的行结尾是什么。

Bootstrap 4 锚链接未指向目标

所以我有一个 bootstrap4 单页索引页面，带有一个导航栏，其中包含跳转到页面正确部分的超链接。 示例：此导航链接转到 id="events: 的部分： 所以我有一个 bootstrap4 单页索引页面，带有一个导航栏，其中包含跳转到页面正确部分的超链接。 示例：此导航链接 转到 id="events: 的部分 <li class="nav-item"><a class="nav-link" href="#events">Events</a></li> <div id="events" class="events-container section-container text-left vents px-md-5"> 我创建了一个具有相同导航栏和链接的单独 contact.php 页面，并使用以下代码从该 contact.php 页面链接到索引页面上的部分： <li class="nav-item"><a class="nav-link" href="index.php#events">Events</a></li> 但是，这不起作用。单击该链接不会执行任何操作。所有列表链接都将链接到index.php 页面，但不会链接到该页面上的特定部分。任何帮助或建议将不胜感激。 花了几个小时修改CSS并删除和添加不同的代码元素之后——最终发现问题是同位素jquery代码——认为它以某种方式干扰了锚链接。我从 contact.php 页面中删除了 isotope.js 文件。我是 javascript 新手，没有意识到 jquery 如何影响其他元素。任何关于覆盖同位素对锚点影响的提示或建议都非常受欢迎:)

带有“锚点”的 URL“文本片段”

例如，从移动浏览器（Opera）浏览此页面，所有部分都是关闭的，因此您需要打开其锚点才能看到该段落。现在，如何突出显示标题，Dettagli molecular...

Nuxt 3 使用哈希链接平滑滚动

在我的Nuxt.js 3项目中，我想实现单页导航。我遵循了以下文章，但没有成功。有什么建议么？ https://dev.to/dimer191996/nuxt-js-smooth-scrolling-with...

在 <option> 标签内使用 href 链接

我有以下 HTML 代码： 首页 联系方式 我有以下 HTML 代码： <select name="forma"> <option value="Home">Home</option> <option value="Contact">Contact</option> <option value="Sitemap">Sitemap</option> </select> 如何将 Home、Contact 和 Sitemap 值设为链接？ 我使用了以下代码，正如我所料，它不起作用： <select name="forma"> <option value="Home"><a href="home.php">Home</a></option> <option value="Contact"><a href="contact.php">Contact</a></option> <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option> </select> 2022 年更新：这个答案很好，但实际上在 2022 年我们不应该再这样做了！ 更新（2020 年 5 月）： 有人在评论中问我为什么不提倡这个解决方案。我想这是一个语义问题。我宁愿我的用户使用 <a> 进行导航，并保留 <select> 进行表单选择，因为 HTML 元素具有语义满足并且它们有目的，anchors 带您去往的地方，<select> 用于从列表中选择内容。 考虑一下，如果您正在使用非传统浏览器（非图形浏览器或屏幕阅读器或以编程方式访问页面，或禁用 JavaScript）查看页面，那么此内容的“含义”或“意图”是什么 <select> 你用过导航吗？它说“请选择一个页面名称”，没有太多其他内容，当然也没有关于导航的内容。对此的简单反应是well i know that my users will be using IE or whatever so shrug，但这有点忽略了语义的重要性。 虽然一个时髦的下拉 UI 元素由合适的布局元素（和一些 js）组成，包含一些常规锚点，但即使布局元素丢失，它仍然保留其意图，“这些是一堆链接，选择一个，我们将导航到那里”. 这是一篇关于误用和滥用<select>的文章。 原答案 <select name="forma" onchange="location = this.value;"> <option value="Home.php">Home</option> <option value="Contact.php">Contact</option> <option value="Sitemap.php">Sitemap</option> </select> 更新（2015 年 11 月）： 在当今时代，如果您想要一个下拉菜单，有很多可以说是 更好的方法来实现。 这个答案是对直接问题的直接回答，但我不这样做不要在面向公众的网站上提倡这种方法。 您不能在选项标签内使用 href 标签。您将需要 JavaScript 来执行此操作。 <select name="formal" onchange="javascript:handleSelect(this)"> <option value="home">Home</option> <option value="contact">Contact</option> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value+".php"; } </script> 使用真正的下拉菜单：列表（ul，li）和链接。切勿滥用表单元素作为链接。 使用屏幕阅读器的读者通常会浏览自动生成的链接列表 - 他们会错过这些重要信息。许多键盘导航系统（例如 JAWS、Opera）为链接和表单元素提供不同的键盘快捷键。 如果您仍然无法放弃 select 的想法，至少不要使用 onchange 处理程序。这对于键盘用户来说是一个真正的痛苦，它使您的第三个项目几乎无法访问。 接受的解决方案看起来不错，但有一种情况它无法处理： 重新选择同一个选项时，不会触发“onchange”事件。所以，我想出了以下改进： HTML <select id="sampleSelect" > <option value="Home.php">Home</option> <option value="Contact.php">Contact</option> <option value="Sitemap.php">Sitemap</option> </select> jQuery $("select").click(function() { var open = $(this).data("isopen"); if(open) { window.location.href = $(this).val() } //set isopen to opposite so next time when use clicked select box //it wont trigger this event $(this).data("isopen", !open); }); （我没有足够的声誉来评论toscho的答案。） 我没有使用屏幕阅读器的经验，我确信您的观点是正确的。 但是，就使用键盘操作选择而言，使用键盘选择任何选项都很简单： TAB 到控件 按空格键打开选择列表 向上或向下箭头滚动到所需的列表项 ENTER 选择所需项目 仅在按 ENTER 时，onchange 或 (JQuery .change()) 事件才会触发。 虽然我个人不会将表单控件用于简单的菜单，但有许多 Web 应用程序使用表单控件来更改页面的呈现方式（例如排序顺序）。这些可以通过 AJAX 来实现，以将新内容加载到页面，或者在旧的实现中，通过触发新页面加载，这本质上是页面链接。 恕我直言，这些是表单控件的有效用途。 <select> 标签创建一个下拉列表。您不能将 html 链接放入下拉列表中。 但是，有一些 JavaScript 库提供类似的功能。这是一个示例：http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm <select name="career" id="career" onchange="location = this.value;"> <option value="resume" selected> All Applications </option> <option value="resume&j=14">Seo Expert</option> <option value="resume&j=21">Project Manager</option> <option value="resume&j=33">Php Developer</option> </select> 我确信有人可以用 Jquery 做出比这更好的答案，其中下拉列表中的更改将导致一个新页面（有利于导航栏上的导航控制）。 <td><select name="forma" id='SelectOption'> <option value="Home"><a href="home.php">Home</a></option> <option value="Contact"><a href="contact.php">Contact</a></option> <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option> </select></td><td> document.getElementById('SelectOption').addEventListener('change', function() { val = $( "#SelectOption" ).val(); console.log(val) if(val === 'Home') { window.open('home.php','_blank'); } if(val === 'Contact') { window.open('contact.php', '_blank'); } if (val === 'Sitemap') { window.open('sitemap.php', '_blank'); } });

target="_blank" 不适用于下载属性

我使用如下： 下载 而 pdfSrc 来自 API 响应，它是一个 minio 链接....

如何将 HTML 页面滚动到给定的锚点

我想让浏览器将页面滚动到给定的锚点，只需使用 JavaScript。 我在 HTML 代码中指定了 name 或 id 属性： .. 我想让浏览器将页面滚动到给定的锚点，只需使用 JavaScript。 我在 HTML 代码中指定了 name 或 id 属性： <a name="anchorName">..</a> 或 <h1 id="anchorName2">..</h1> 我希望获得与导航至 http://server.com/path#anchorName 相同的效果。应滚动页面，以便锚点位于页面可见部分的顶部附近。 function scrollTo(hash) { location.hash = "#" + hash; } 根本不需要 jQuery！ 更简单： var element_to_scroll_to = document.getElementById('anchorName2'); // Or: var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0]; // Or: var element_to_scroll_to = $('.my-element-class')[0]; // Basically `element_to_scroll_to` just have to be a reference // to any DOM element present on the page // Then: element_to_scroll_to.scrollIntoView(); 您可以使用 jQuery 的 .animate()、.offset() 和 scrollTop。喜欢 $(document.body).animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); 示例链接：http://jsbin.com/unasi3/edit 如果你不想动画，请使用 .scrollTop()，例如： $(document.body).scrollTop($('#anchorName2').offset().top); 或者 JavaScript 的原生 location.hash，例如： location.hash = '#' + anchorid; 2018 年至今纯 JavaScript： 有一个非常方便的方法来滚动到元素： el.scrollIntoView({ behavior: 'smooth', // smooth scroll block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area. }) 但据我了解，它没有像下面的选项那么好的支持。 了解更多方法。 如果需要元素位于顶部： const element = document.querySelector('#element') const topPos = element.getBoundingClientRect().top + window.pageYOffset window.scrollTo({ top: topPos, // scroll so that the element is at the top of the view behavior: 'smooth' // smooth scroll }) CodePen 上的演示示例 如果您希望元素位于中心： const element = document.querySelector('#element') const rect = element.getBoundingClientRect() // get rects(width, height, top, etc) const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); window.scroll({ top: rect.top + rect.height / 2 - viewHeight / 2, behavior: 'smooth' // smooth scroll }); CodePen 上的演示示例 支持： 他们写道，scroll与scrollTo的方法相同，但scrollTo的支持效果更好。 详细了解方法。 jAndy 的解决方案很棒，但平滑滚动似乎在 Firefox 中出现问题。 这种方式在 Firefox 中也适用。 (function($) { $(document).ready(function() { $('html, body').animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); }); })(jQuery); 让浏览器将页面滚动到给定锚点的最简单方法是在 style.css 文件中添加 *{scroll-behavior: smooth;}，并在 HTML 导航中使用 #NameOfTheSection。 *{scroll-behavior: smooth;} <a href="#scroll-to">Click to Scroll<a/> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <section id="scroll-to"> <p>it will scroll down to this section</p> </section> 在 2018 年，你不需要 jQuery 来完成这样简单的事情。内置的 scrollIntoView() 方法支持“behavior”属性以平滑滚动到页面上的任何元素。您甚至可以使用哈希值更新浏览器 URL，使其可加入书签。 来自 滚动 HTML 书签的教程，这是一种自动为页面上的所有锚链接添加平滑滚动的本机方法： let anchorlinks = document.querySelectorAll('a[href^="#"]')   for (let item of anchorlinks) { // relitere     item.addEventListener('click', (e)=> {         let hashval = item.getAttribute('href')         let target = document.querySelector(hashval)         target.scrollIntoView({             behavior: 'smooth',             block: 'start'         })         history.pushState(null, null, hashval)         e.preventDefault()     }) } 这是一个没有 jQuery 的纯 JavaScript 解决方案。它已在 Chrome 和 Internet Explorer 上进行了测试，但未在 iOS 上进行了测试。 function ScrollTo(name) { ScrollToResolver(document.getElementById(name)); } function ScrollToResolver(elem) { var jump = parseInt(elem.getBoundingClientRect().top * .2); document.body.scrollTop += jump; document.documentElement.scrollTop += jump; if (!elem.lastjump || elem.lastjump > Math.abs(jump)) { elem.lastjump = Math.abs(jump); setTimeout(function() { ScrollToResolver(elem);}, "100"); } else { elem.lastjump = null; } } 演示：https://jsfiddle.net/jd7q25hg/12/ 平滑滚动到合适位置 获取正确y坐标并使用window.scrollTo({top: y, behavior: 'smooth'}) const id = 'anchorName2'; const yourElement = document.getElementById(id); const y = yourElement.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({top: y, behavior: 'smooth'}); $(document).ready -> $("a[href^='#']").click -> $(document.body).animate scrollTop: $($(this).attr("href")).offset().top, 1000 CSS-Tricks 的解决方案在 jQuery 2.2.0 中不再有效。它会抛出选择器错误： JavaScript 运行时错误：语法错误，无法识别的表达式：a[href*=#]:not([href=#]) 我通过更改选择器修复了它。完整的片段是这样的： $(function() { $("a[href*='#']:not([href='#'])").click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 大多数答案都不必要地复杂。 如果你只是想跳转到目标元素，则不需要JavaScript： # the link: <a href="#target">Click here to jump.</a> # target element: <div id="target">Any kind of element.</div> 如果你想动画滚动到目标，请参考5hahiL的回答。 这有效： $('.scroll').on("click", function(e) { e.preventDefault(); var dest = $(this).attr("href"); $("html, body").animate({ 'scrollTop': $(dest).offset().top }, 2000); }); https://jsfiddle.net/68pnkfgd/ 只需将“滚动”类添加到您想要设置动画的任何链接 jQuery("a[href^='#']").click(function(){ jQuery('html, body').animate({ scrollTop: jQuery( jQuery(this).attr('href') ).offset().top }, 1000); return false; }); 这是一个工作脚本，会将页面滚动到锚点。 要进行设置，只需为锚点链接提供一个与您要滚动到的锚点的名称属性相匹配的 id。 <script> jQuery(document).ready(function ($){ $('a').click(function (){ var id = $(this).attr('id'); console.log(id); if ( id == 'cet' || id == 'protein' ) { $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); } }); }); </script> 我在 CSS-Tricks 上找到了一个简单易用的 jQuery 解决方案。我现在用的就是这个。 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); Vue.js 2 解决方案...添加一个简单的数据属性来简单地强制更新： const app = new Vue({ ... , updated: function() { this.$nextTick(function() { var uri = window.location.href var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1] if ( String(anchor).length > 0 && this.updater === 'page_load' ) { this.updater = "" // only on page-load ! location.href = "#"+String(anchor) } }) } }); app.updater = "page_load" /* Smooth scrolling in CSS - it works in HTML5 only */ html, body { scroll-behavior: smooth; }

锚链接 (#) 无法在 Next.JS 应用程序路由器的同一页面内工作

我的 Next.js 应用程序中有一个 组件，其 href 设置为 #targetDiv。理想情况下，当用户单击按钮/链接时，页面应滚动到 ID 为 #tar 的相应部分...

如何防止锚点点击跳转？

我使用 e.preventDefault();禁用默认锚点行为。 有没有办法阻止点击时仅跳转到目标？ 我试过： var hash = window.location.hash; var 链接 = $('a'); ...

路由到 Blazor 中的命名元素（使用锚点导航到特定元素）

我无法使用 HTML 锚点导航到 Blazor 服务器中页面的特定 HTML 元素。例如： @页面“/测试” &l... 我无法使用 HTML 锚点导航到 Blazor 服务器中页面的特定 HTML 元素。例如： @page "/test" <nav> <!-- One version I've tried --> <a href="#section2">Section2</a> <!-- Another version I've tried --> <NavLink href="#section2">Section2</NavLink> </nav> @* ... *@ <h2 id="section2">It's Section2.</h2> @* ... *@ 当我单击指向 Section2 的链接时，我会被重定向到路线 http://localhost:5000/test#section2，但是，它将位于页面顶部。在我看来，浏览器应该向下滚动到由 Element Selector 指定的正确元素，但它不能。 是否必须在 Blazor 中以特殊方式完成？ 我在 .Net6 中使用 Blazor 6 和 Visual Studio 2022（版本：17.0.2）。 您还可以使用使用内置 Blazor JS 的 ElementReference 和 FocusAsync。要使用它，您需要使用一个小技巧来使组件“可聚焦”，即设置一个tabindex。我使用了 span，但你可以使用你喜欢的。我使用 @alessandromanzini 的代码从 NavigationManager 获取元素。 这是一个组件： using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Rendering; using Microsoft.AspNetCore.Components.Routing; using System.Diagnostics.CodeAnalysis; namespace SO75358165; public class Bookmark : ComponentBase, IDisposable { private bool _setFocus; [Inject] private NavigationManager NavManager { get; set; } = default!; [Parameter] public RenderFragment? ChildContent { get; set; } [Parameter] public string? BookmarkName { get; set; } [DisallowNull] public ElementReference? Element { get; private set; } protected override void BuildRenderTree(RenderTreeBuilder builder) { builder.OpenElement(0, "span"); builder.AddAttribute(2, "tabindex", "-1"); builder.AddContent(3, this.ChildContent); builder.AddElementReferenceCapture(4, this.SetReference); builder.CloseElement(); } protected override void OnInitialized() => NavManager.LocationChanged += this.OnLocationChanged; protected override void OnParametersSet() => _setFocus = this.IsMe(); private void SetReference(ElementReference reference) => this.Element = reference; private void OnLocationChanged(object? sender, LocationChangedEventArgs e) { if (this.IsMe()) { _setFocus = true; this.StateHasChanged(); } } protected async override Task OnAfterRenderAsync(bool firstRender) { if (_setFocus) await this.Element!.Value.FocusAsync(false); _setFocus = false; } private bool IsMe() { string? elementId = null; var uri = new Uri(this.NavManager.Uri, UriKind.Absolute); if (uri.Fragment.StartsWith('#')) { elementId = uri.Fragment.Substring(1); return elementId == BookmarkName; } return false; } public void Dispose() => NavManager.LocationChanged -= this.OnLocationChanged; } 这是我的测试页面： @page "/" <PageTitle>Index</PageTitle> <NavLink href="#me">To me</NavLink> <h1>Hello, world!</h1> <h1>Hello, world!</h1> <h1>Hello, world!</h1> //..... <h1>Hello, world!</h1> <Bookmark BookmarkName="me" > <h1 id="me">Focus on Me</h1> </Bookmark> 加载页面后，浏览器会自动滚动到 URL 片段部分中由其 id 标识的元素。当您单击具有 #element-id 类型的 href 的锚点时，它会执行相同的操作。 页面加载行为不适用于 Blazor 服务器，因为页面加载时该元素尚不存在。 解决方案是使用 javascript 和 razor 组件手动创建滚动条： 首先，创建一个像这样的剃刀组件 @inject IJSRuntime JSRuntime @inject NavigationManager NavigationManager @implements IDisposable @code { protected override void OnInitialized() { NavigationManager.LocationChanged += OnLocationChanged; } protected override async Task OnAfterRenderAsync(bool firstRender) { await ScrollToFragment(); } public void Dispose() { NavigationManager.LocationChanged -= OnLocationChanged; } private async void OnLocationChanged(object sender, LocationChangedEventArgs e) { await ScrollToFragment(); } private async Task ScrollToFragment() { var uri = new Uri(NavigationManager.Uri, UriKind.Absolute); var fragment = uri.Fragment; if (fragment.StartsWith('#')) { // Handle text fragment (https://example.org/#test:~:text=foo) // https://github.com/WICG/scroll-to-text-fragment/ var elementId = fragment.Substring(1); var index = elementId.IndexOf(":~:", StringComparison.Ordinal); if (index > 0) { elementId = elementId.Substring(0, index); } if (!string.IsNullOrEmpty(elementId)) { await JSRuntime.InvokeVoidAsync("BlazorScrollToId", elementId); } } } } 然后在 Blazor 脚本呈现之前的某个位置添加此 javascript 代码。你可以用脚本标签包裹它并将其放在头部。 function BlazorScrollToId(id) { const element = document.getElementById(id); if (element instanceof HTMLElement) { element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); } } 如果需要，最后在您的页面中实现它。您还可以将其放置在布局中，这样它将适用于您创建的每个页面。 @page "/" <PageTitle>Index</PageTitle> <a href="#my-id"> <h1>Hello, world!</h1> </a> <SurveyPrompt Title="How is Blazor working for you?" /> <div style="height: 2000px"> </div> <div id="my-id"> Hello! </div> <AnchorNavigation /> 来源：链接 看到这个问题中的其他可怕的解决方法后，我决定尝试一个简单的解决方法： 查找 href="#(.*?)" 替换为 onclick="window.location.hash = '$1'" 您可能需要在 style.css 中添加一些额外的样式来处理没有 href 的锚点，但我认为除了完全创建另一个组件之外，这是一个简单/可接受的解决方法。

平滑滚动接下来/链接不起作用

我正在使用下一个/链接，但平滑滚动不起作用，但是当我使用锚标记时，它可以正常工作，而使用锚标记页面正在重新加载，但只要路径更改，下一个/链接就不会加载页面...

更改文本部分的超链接颜色

我的文章通过ID链接到上面的超链接。 现在我希望当我位于文本部分内时，我的文本所连接的超链接将变成红色。 怎么做？ #个人...

内部链接无法正确响应：/

所以这是我第一次在任何论坛或任何地方发帖，但是我的一位高级开发人员可以帮助我吗？ 我正在尝试将内部链接添加到我的 html 代码中，但它没有正确响应...

页面将使用绝对 URL 的锚链接重新加载

主页是index.php。我有一个 header.html，其中包含通用导航菜单。 index.php 和另一个页面 (bajnokaink.php) 从此 header.html 文件加载公共导航...

如何在 HTML 中隐藏 Anchor 标签的 href 链接？

试图阻止网络抓取工具/爬虫抓取位于锚标记中的此 URL。我不想从页面本身隐藏图标，只是从 HTML 中隐藏。 试图阻止网络抓取工具/爬虫抓取位于锚标记中的此 URL。我不想从页面本身隐藏图标，只是从 HTML 中隐藏。 <a class="link" href="/hide_this_link_from_html"><img src="printIcon.jpg"/></a>

我的一个 Navabr 链接不起作用 reactjs/Three.js？

我正在关注一个 youtube 视频（three.js）来制作网络作品集。现在我根据我想要的链接对组件进行了一些更改。其中一个链接，即指向项目的链接，无法正常工作...

为什么在 Next.js 13 中使用 not-found.tsx 文件中的内容时 <Link> 标签无法正常工作？

我创建了一个 layout.tsx 文件，其中包含一个链接到我的应用程序根目录的标签 ('/')。当我使用它从现有页面（例如：/about）导航返回到 h...时，该标签工作正常...

Disqus 锚链接“#disqus_thread”不起作用

使用 Disqus 锚链接（例如 url-to/my-blog-post#disqus_thread）访问我的博客 url 时，浏览器不会向下滚动到 元素。 相反，如果我已经... 使用 Disqus 锚链接访问我的博客网址时（例如 url-to/my-blog-post#disqus_thread），浏览器不会向下滚动到 <div id="disqus_thread"> 元素。 相反，如果我已经在页面url-to/my-blog-post 并单击链接url-to/my-blog-post#disqus_thread 它向下滚动到div . 我以为是加载问题。浏览器访问页面并没有找到 div 元素，因为它仍然由 Disqus JS 生成。 我试图改变 JS 代码的位置，但没有任何改变。 这是我博客中的示例帖子网址： https://2bluebuffalo-en.blogspot.com/2018/11/how-to-crop-square-video-macos.html#disqus_thread 它不起作用，但是如果您单击“By Blue Buffalo”旁边的链接（在共享按钮上方，现在写着“2 条评论”），则锚链接有效。 解决方法 好的，这就是我找到的解决方法。它工作得很好。以防万一有人要点击那个链接。 <script> setTimeout(function(){ var hash = window.location.hash.substr(1); if (hash == "disqus_thread") { location.hash = "#comments"; location.hash = "#" + hash; }; }, 1000); </script> 等待是因为我花了一秒钟。加载所有内容（有时甚至更多）。它可以改变。 你可以试试这个技巧： 编辑博客的 HTML 并添加 Disqus 脚本。对于您的评论，您可以这样做： <div id = "comments"> <div id = "disqus_thread"></div> </div> 这将带您到评论部分并加载 Disqus 评论。 我可以告诉你我遇到的这位专家，他非常直率和高效。他帮助破解任何你想要的东西，比如信用评分、学校成绩、贬损标记、驱逐、学生贷款。他也帮助破解了我配偶的 facebook 帐户。他是一体的，通过 Liammason4306 在 g/m/a/i/l/ dot c/o/m 查看他

使用 page.js 路由在 Svelte 应用程序中锚定链接

我的 Svelte 应用程序的页面上有一个锚标记。指向锚点的链接在页面本身上有效，但我无法从另一个页面链接到锚点。当我输入带有锚点的 URL 时，页面