Behavior of page scrolling in an ASP.Net web forms application with Bootstrap integration

Encountering a problem with page scrolling behavior in an ASP.Net web forms application when using Bootstrap CSS. Here's what's happening:

  1. Started a new Web Forms project in Visual Studio 2022
  2. Visual Studio set up the project with necessary folders/files & packages (including Bootstrap 5.2)
  3. On the default.aspx page, placed an asp:Button inside an asp:UpdatePanel, linked to a JavaScript function on client click. The button is supposed to scroll to a div at the bottom of the page.
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:Button ID="btn" runat="server" Text="Button 1" 
OnClientClick="Scroll()" />
</ContentTemplate>  
</asp:UpdatePanel>


<div id="div1" style="background-color:aquamarine">
Scrolled
</div>

<script>
function Scroll() {
/*location.href = '#div1';*/
<%--document.getElementById("<%=div1.ClientID %>")--%>
document.getElementById("div1").scrollIntoView();
}
</script>
  1. Upon testing, noticed that the page initially scrolls to the bottom as expected but then quickly jumps back to the top.

Seeking assistance based on the following observations:

Observations

  1. If the reference to Bootstrap CSS below is disabled, the functionality works correctly without any issue.
<webopt:bundlereference runat="server" path="~/Content/css" />
  1. Visit the link below to access videos and full source code

javascripthtmlcssasp.netbootstrap-5

Answer №1

Alright, after reviewing the provided code snippet, it appears that one of the main issues is that the div element is located outside of the update panel, which may not be ideal for achieving the desired functionality.

However, when using the following markup:

<asp:UpdatePanel ID="upd" runat="server">
    <ContentTemplate>
        <asp:Button ID="btn" runat="server" Text="Button 1"
            OnClientClick="Scroll();return false" />
    </ContentTemplate>
</asp:UpdatePanel>

<div id="div1" style="background-color: aquamarine">
    Scrolled
    one<br />
    two<br />
    three<br />
    four<br />
    five<br />
    test<br />
    ... (content continues) ...
</div>

<script>
    function Scroll() {
        document.getElementById("div1").scrollIntoView();
    }
</script>

The functionality works as intended, as demonstrated in this example:

https://i.sstatic.net/mRagOVDs.gif

I have added a return false statement to the button click event, which helps achieve the scrolling effect on the page. It's important to note that sharing video links or external resources may not be necessary, as providing concise and clear markup examples can help us troubleshoot more effectively.

If you encounter any issues, please create a test page with reproducible markup examples so that we can assist you better. Additionally, incorporating 'webopt' tags within the markup does not seem to be valid, as indicated by the editor warning shown here:

https://i.sstatic.net/Dduc7wU4.png

In conclusion, by simplifying the provided markup and focusing on reproducing the error scenario, we can collaborate efficiently to resolve any potential issues. Thank you for your understanding and cooperation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the loading of data in vue is delayed, the information may not be accessible to various child components

`I recently started working with Vue and have encountered a problem. The main parent component on this page is as follows, with 2 child components. The structure is like this {CURRENT PAGE..} > {FancyButton} > {AnotherViewChild} I am trying to pass a ...

javascriptvue.jsvue-typescript

What tools do Sketchfab and Thangs utilize to display 3D models?

My website functions as a digital library for a particular niche of 3D models. However, I've noticed that the performance on mobile devices when using modelviewer to display glb files is quite poor. Frequently, the page crashes and reloads unexpectedl ...

javascriptthree.jsusdzmodel-viewer

Merge identical data into a unified field within a table

I have a table that displays different colors and their quantities. I would like to merge rows with the same color into one row, with the total quantity shown in that row. For instance, if there are 2 "black" colors with quantities of 5 and 2, I want to c ...

javascriptvue.js

Utilizing scope parameters in conjunction with filters

I'm looking for a filtering solution to filter results displayed in a table using ngRepeat. The filter should be based on user input. Currently, I'm implementing it like this: //HTML <input type="search" ng-model="search"> <table> ...

javascriptangularjs

Exploring JSON Array Data and Its Sub-Properties in React

I have a JSON array containing personal data that I want to access from my React app. This JSON file is already included in my React application. { "person": [ { "id": "userId", "sellerImage": "https://i.pravatar.cc/300", ...

javascriptarraysreactjsobject

HighCharts.js - Customizing Label Colors Dynamically

Can the label color change along with gauge color changes? You can view my js fiddle here to see the current setup and the desired requirement: http://jsfiddle.net/e76o9otk/735/ dataLabels: { format: '<div style="margin-top: -15.5px; ...

javascriptcsshighchartscolorslabel

Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components: <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br&g ...

cssangularangular-material

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

htmlcssflexbox

Using the drag and drop feature with the v-textarea component in Vuetify

Struggling to incorporate a Drag and Drop feature on vuetify v-textarea. Encountering an issue where clicking on the v-textarea results in the value from a dropped component being removed. Unsure if it's a flaw in my code or a limitation in vuetify v- ...

javascriptvue.jsvuetify.js

Obtaining a PDF file through JavaScript that works on all browsers without compatibility issues

While I am able to successfully download a PDF using AngularJS in Chrome, it seems to encounter issues with the latest versions of FireFox, Internet Explorer 11, and Edge. It appears that a shim is required for IE9, although the current one doesn't se ...

javascriptangularjsangularjs-1.5

Tips for incorporating live 2D text updates in a Three.js environment

I'm searching for a more efficient method to incorporate 2D text into my three.js scene. Using TextGeometry has proven challenging as I struggle with updating the text in real-time without compromising performance, and I want to avoid manually drawing ...

javascripttextthree.js2d

Fade out a component in Material UI/React by setting a timeout in the parent's useEffect hook for when it unmounts

Incorporating a fade out transition into my child component, <Welcome />, using Material UI's Fade component is my current goal. This transition should be triggered by two specific conditions: The timeout set in the useEffect function expires. ...

javascriptcssreactjsmaterial-ui

Implementing JSON data binding for webgrid in ASP.net MVC4

I am struggling to populate a webgrid with Datatable values using Json. I have implemented a DropDownlist to select a person's name, and based on that selection, I want to display the corresponding data in the webgrid. However, my current code does no ...

c#asp.netasp.net-mvcjsonasp.net-mvc-4

Spacing between the rows of a table

I am seeking to achieve a unique visual style for the rows in my table, similar to the one shown below. I attempted to use CSS border properties in the code snippet provided but desire more spacing between each row with a thin border and sharp edges. .dat ...

cssangularbootstrap-4ngx-datatableborder-spacing

Change res without altering the original argument

I'm developing an Express application and I've implemented the AirBnB eslint configuration for linting. The specific lint rule that caught my attention is no-params-reassign, which flags reassignment of function parameters as errors. While I appr ...

javascriptnode.jsexpresseslint

Having trouble retrieving values from multiple checkboxes in HTML

I have a HTML table displaying all the items from my SQL database. Each item has a checkbox that is supposed to pass the value of the item name to the calculation route when the submit button is pressed. However, the issue is that the submit button only ...

htmlnode.jsexpresscheckbox

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

Tips for choosing the initial link within a parent list entry

I am working with a jQuery accordion and have a specific need to remove the href attribute from the parent li element without affecting its children. This task requires precision in targeting only the parent li. var parent = $("#quicklaunch ul > li:has ...

javascriptjqueryhtmlcss

collection check_boxes = boxes for collection

Is there a way to automatically sync the checked or unchecked days in the ":committed" collection_check_boxes with the ":send_email" collection_check_boxes when a user interacts with them? For instance, if a user checks "sun" and unchecks "fri" in the "co ...

javascriptjqueryruby-on-railsrubyajax

What is the best way to utilize webpack for transferring files to the distribution directory?

I am trying to figure out how to get webpack to automatically grab the necessary JS and CSS files and place them in the dist folder of my index.html without needing to require or import them. Any suggestions on how to accomplish this task efficiently? ...

javascriptcssreactjswebpack