locked
Bootstrap scrolling under navbar problem RRS feed

  • Question

  • User-597297215 posted

    I am building an ASP.Net web forms site based upon the standard VS2017 bootstrap template and have come across a problem that I’m struggling with. When I use navigation links on my page it scrolls the page so that the link is under the navbar and not visible.

    I have a set of navigation links down the side of the page containing items like:

    <li><a href="#Addresses">Addresses</a></li> 

    On the main page I have a matching section like:

    <h3 id="Addresses">Lived at</h3>

    The problem is when I click on the <li> link it scrolls the page so that the <h3> heading is hidden underneath the navbar. I want to scroll the screen so that the heading is visible.

    The only solution I have come up with is to precede the <h3> heading by whitespace and navigate to this whitespace rather than the <h3> tag but this looks messey when I scroll down manually.

    Any suggestions how I can navigate to the id minus 30px?

    Sunday, February 4, 2018 10:00 PM

Answers

  • User-597297215 posted

    After a week attempting to solve this I think I have come to the conclusion that there is no perfect solution to this but the following is a reasonable approach.

     From my experiments I think that navigation within a document following clicking an anchor link like <a href=”#address”/> is not detectable. There is no ‘onmovewithinpage’ event or equivalent which can be used to scroll the page down. However the ‘onblur’ event from the anchor tag can usually be used to fire a nudge-down function on Chrome and IE but not Edge (I haven’t tried anything else).

     We can navigate correctly into a page containing an anchor #address in its URL for all the three browsers.

     If anyone is interested this is what I did:

    1. In Site.Master add ‘onload="loadedEvent()"’ within <body> tag for navigating into page.
    2. In Site.Master add the following two functions:

    ‘<script>

               function nudge() {

                    var body = document.body;// For Safari

                    var html = document.documentElement; //For Chrome,Firefox,IE and Opera

                    body.scrollTop -= 60;

                    html.scrollTop -= 60;

                }

                function loadedEvent() {

                    var body = document.body;

                    var html = document.documentElement;

                    if (body.scrollTop > 100) { body.scrollTop -= 60; }

                    if (html.scrollTop > 100) { html.scrollTop -= 60; }

                }

            </script>’

    1. Add anchor tags like ‘<a href="#TopOfPage" onblur="nudge()">’ where required.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 10, 2018 3:27 PM

All replies

  • User-1838255255 posted

    Hi wer246,

    According to your description, as far as i know, you want to h3 content below the navbar after click the tag am maybe you want to how to dynamically add 30px after click the tag a. I think you could try to use scrolltop method, for more details, please check this tutorial:

    HTML DOM scrollTop Property: 

    https://www.w3schools.com/jsref/prop_element_scrolltop.asp 

    Best Regards,

    Eric Du 

    Monday, February 5, 2018 11:57 AM
  • User-597297215 posted

    Thank you Eric,

    My objective is to have the H3 heading and content visible below the navbar after the link is clicked.

    Another example of the same problem is in my Site.Master page which I have modified as below (additions in bold):

      <div class="container body-content" id="TopOfPage" >

            <asp:ContentPlaceHolder ID="MainContent" runat="server">

            </asp:ContentPlaceHolder>

            <hr />

            <footer>

                  <p style="width: 1200px">&copy; <%: DateTime.Now.Year %> - MyAspPage<span style="float:right;"><a href="#TopOfPage">Back to top</a></span></p>

            </footer>

      </div>

    This gives me a ‘Back to top’ clickable link which again scrolls the top of the page behind the navbar. I want to be able to see the top of the page.

    I’ve tried all sorts of #content CSS containing padding and margin-top without success. I’ve also considered client side scripting using scrollTop. The difficulty with the scrollTop approach is I can’t work out how to distinguish between a scroll caused manually and by the navigation tag click – I want to scrollTop modify the position following a navigation click but not when the reader drags the page conventionally.

    The problem occurs with both Chrome and Edge.

    Monday, February 5, 2018 1:33 PM
  • User-597297215 posted

    After a week attempting to solve this I think I have come to the conclusion that there is no perfect solution to this but the following is a reasonable approach.

     From my experiments I think that navigation within a document following clicking an anchor link like <a href=”#address”/> is not detectable. There is no ‘onmovewithinpage’ event or equivalent which can be used to scroll the page down. However the ‘onblur’ event from the anchor tag can usually be used to fire a nudge-down function on Chrome and IE but not Edge (I haven’t tried anything else).

     We can navigate correctly into a page containing an anchor #address in its URL for all the three browsers.

     If anyone is interested this is what I did:

    1. In Site.Master add ‘onload="loadedEvent()"’ within <body> tag for navigating into page.
    2. In Site.Master add the following two functions:

    ‘<script>

               function nudge() {

                    var body = document.body;// For Safari

                    var html = document.documentElement; //For Chrome,Firefox,IE and Opera

                    body.scrollTop -= 60;

                    html.scrollTop -= 60;

                }

                function loadedEvent() {

                    var body = document.body;

                    var html = document.documentElement;

                    if (body.scrollTop > 100) { body.scrollTop -= 60; }

                    if (html.scrollTop > 100) { html.scrollTop -= 60; }

                }

            </script>’

    1. Add anchor tags like ‘<a href="#TopOfPage" onblur="nudge()">’ where required.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 10, 2018 3:27 PM