Blazor Anchor Tag Scroll To
source link: https://nu-codyanhorn-tech.azurewebsites.net/blog/blazor-anchor-tag-scroll-to
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
In this article I will go over an issue with Blazor applications and scrolling to a hash anchor on the current page.
The Problem
When your using ASP.NET Core Blazor and want to navigate to an on page anchor, sadly requires a little bit of JavaScript to handle this scenario. I believe the reason for this is because a Blazor application will watch all routing events, even if its an on page navigation. To also get around this requires attributes on the Razor anchor tag to prevent the default behavior of the link.
To get help alleviate this issue I crafted a small snippet of JavaScript and a Razor component that helps with the creation of links, allowing for them to scroll to the hash on your current page or navigate by default behavior. The JavaScript will take in the element's id and scroll it into view, and update the window.location.hash to the passed in element id. The below Razor Component helps encapsulate that necessary logic calling into the JavaScript and preventing default behavior of the anchor tag.
_Host.cshtml - Here is a snippet of JavaScript that should be included in our root HTML document.
function scrollIntoView(elementId) {
var elem = document.getElementById(elementId);
if (elem) {
elem.scrollIntoView();
window.location.hash = elementId;
}
}
AcnhorLink.razor - This is our Anchor component, it encapsulates the HTML anchor tag with logic, provided by AnchorLInk.razor.cs, to trigger the
scrollIntoView
, provided by JavaScript, if necessary.<a @attributes="Attributes"
@onclick="AnchorOnClickAsync"
@onclick:preventDefault="@preventDefault">
@ChildContent
</a>
AnchorLink.razor.cs - This is the backing C# of the AnchorLink component, the logic accounts for scrolling and normal page navigation.
namespace Components.AnchorLink
{
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
public partial class AnchorLink
: ComponentBase
{
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object> Attributes { get; set; } = new Dictionary<string, object>();
[Parameter]
public RenderFragment ChildContent { get; set; } = null!;
[Inject]
protected IJSRuntime JSRuntime { get; set; } = null!;
private string targetId = string.Empty;
private bool preventDefault = false;
protected override void OnParametersSet()
{
if (Attributes.ContainsKey("href"))
{
// If the href attribute has been specified, we examine the value of it. If if starts with '#'
// we assume the rest of the value contains the ID of the element the link points to.
var href = $"{Attributes["href"]}";
if (href.StartsWith("#"))
{
// If the href contains an anchor link we don't want the default click action to occur, but
// rather take care of the click in our own method.
targetId = href[1..];
preventDefault = true;
}
}
base.OnParametersSet();
}
private async Task AnchorOnClickAsync()
{
if (!string.IsNullOrEmpty(targetId))
{
// If the target ID has been specified, we know this is an anchor link that we need to scroll
// to, so we call the JavaScript method to take care of this for us.
await JSRuntime.InvokeVoidAsync(
"scrollIntoView",
targetId
);
}
}
}
}
Recommend
-
46
Anchor 安佳 全脂UHT牛奶 (新西兰原装)1L *12件 91.48元含税(双重优惠),来自什么值得买甄选出的京东全球购优惠产品,汇聚数十万什么值得买网友对该网购产品的点评。
-
51
Anchor 安佳 全脂UHT纯牛奶 250ml 24盒 普通装 *3件 177元包邮(需用券),来自什么值得买甄选出的苏宁易购优惠产品,汇聚数十万什么值得买网友对该网购产品的点评。
-
52
限地区:Anchor 安佳 全脂UHT纯牛奶 250ml 24盒 普通装 *2件 99元包邮,来自什么值得买甄选出的天猫超市优惠产品,汇聚数十万什么值得买网友对该网购产品的点评。
-
51
25日0点:Anchor 安佳 全脂纯牛奶 250ml*24盒 59.9元包邮(需用码),来自什么值得买甄选出的亚马逊中国优惠产品,汇聚数十万什么值得买网友对该网购产品的点评。
-
29
-
44
-
29
ArXiv preprint, Submitted on 16 Aug 2019. Paper link: https://arxiv.org/abs/1908.06079 Github: 尚未釋出,可關注作者的 Github。 https://github.com/lizhitwo?tab=repositories 簡介
-
54
加入极市 专业CV交流群,与 6000+来自腾讯,华为,百度,北大,清华,中科院 等名企名校视觉开发者互动交流!更有机会与 李开复老师 等大牛群内...
-
11
Today we will continue mastering view preferences in SwiftUI that we touched a few weeks ago. Anchor preferences are another type of view preferences provided by SwiftUI . The main goal of anchor prefer...
-
6
[GopherJS] Access href Value of Anchor <a> Tag January 06, 2017 I...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK