You can add smooth scrolling to a Blazor app using a combination of Blazor components and JavaScript interop, similar to the functionality available in jQuery UI components.
Step 1: Create a New Blazor App Run the following command to create a new Blazor WebAssembly app:
.NET CLI
| dotnet new blazorserver -n SmoothScrollDemo |
Step 2: Add CSS Styles Open the wwwroot/css/site.css file and add the following CSS class for smooth scrolling:
[wwwroot/css/site.css]
.smooth-scroll {
scroll-behavior: smooth;
} Step 3: Create a SmoothScroll Component Create a new Blazor component named SmoothScroll.razor:
[SmoothScroll.razor]
<!-- Pages/SmoothScroll.razor -->
@page "/Smoothscroll"
@inject IJSRuntime JSRuntime
<h3>Smooth Scrolling Example</h3>
<div class="smooth-scroll">
<p>
This is a demonstration of smooth scrolling in a Blazor app.
Click the button below to smoothly scroll to the bottom of the page.
</p>
<button @onclick="ScrollToBottom">Scroll to Bottom</button>
</div>
<div class="content">
<!-- Add some content here to make the page longer -->
<h4>Smooth Scrolling in Blazor: Elevating User Experience with Elegance</h4>
<p>In the realm of modern web development, the user experience reigns supreme, and every nuance plays a pivotal role in crafting an immersive and delightful interaction. One such understated yet highly impactful element is the art of smooth scrolling. Blazor, the cutting-edge web framework by Microsoft, empowers developers with the ability to seamlessly integrate this feature into HTML elements. By adding an enchanting fluidity to the scrolling mechanism, Blazor transforms the user journey into an elegant dance, enhancing engagement and delivering a heightened sense of sophistication.</p>
<h4>The Essence of Smooth Scrolling</h4>
<p>Smooth scrolling, at its core, is the art of imbuing scrolling actions with an exquisite gracefulness. Unlike the conventional abrupt and jarring movements that characterize traditional scrolling, smooth scrolling introduces a harmonious glide that seamlessly navigates users through various sections or elements on a web page. This simple yet transformative touch has the power to transcend the mundane, transforming user interactions into a symphony of motion and elegance.</p>
<h4>Unveiling the Benefits</h4>
<ol>
<li>
<h6>Enhanced User Engagement:</h6>
By eliminating the disorienting jumps, smooth scrolling creates a captivating rhythm that keeps users immersed and engaged as they explore the content.
</li>
<li>
<h6>Visual Fluidity:</h6>
The graceful transitions between sections establish a visual continuity that feels natural and intuitive, amplifying the overall aesthetics of the website.
</li>
<li>
<h6>Improved Readability:</h6>
For lengthy articles or content-rich pages, smooth scrolling guarantees a comfortable reading experience by gradually revealing the content.
</li>
<li>
<h6> Subtle Sophistication: </h6>
Smooth scrolling lends an air of refinement to the user journey, elevating the perception of the website's design and enhancing its overall brand image.
</li>
<li>
<h6>Extended Time on Page:</h6>
The fluidity and beauty of smooth scrolling entice users to linger, thereby increasing their time spent on the website and fostering a deeper connection.
</li>
</ol>
</div>
@code {
private async Task ScrollToBottom()
{
await JSRuntime.InvokeVoidAsync("scrollToBottom");
}
} Step 4: Add the following JavaScript function for scrolling to the bottom of the page in _Host.cshtml.
[_Host.cshtml]
<body>
…….
<script src="_framework/blazor.server.js"></script>
<script>
window.scrollToBottom = function () {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
};
</script>
</body> Step 5: Test the Smooth Scrolling Effect Run the Blazor app using the following command:
NET CLI
| dotnet run |
Share with