The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

Question

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

I recently added a new menu option to my Angular 7 project, but it's not functioning correctly. I used Bootstrap 4 and followed this example from here. Can anyone help me figure out the correct way to implement this?

Check out the sample on StackBlitz.

Thank you.

This is the code snippet:

home.component.html

<section id="about">
   <div class="container">
     <div class="row">
       <div class="col-lg-8 mx-auto">
         <h2>About this page</h2>
         <p class="lead">This template showcases various features like:</p>
         <ul>
           <li>Smooth scrolling navigation links</li>
           <li>Responsive design for a one-page website</li>
           <li>Bootstrap scrollspy functionality</li>
           <li>Minimal custom CSS for personalized designs</li>
         </ul>
       </div>
     </div>
   </div>
 </section>

 // More sections follow...

header.component.html

<header id="header">
    // Header content goes here...
</header>

full-component.html

<app-header></app-header>
<router-outlet></router-outlet>

css angular bootstrap-4 angular7

Answer 1

Answer №1

Implement a function called scrollToElement() within the app.component.ts file and then invoke this function from the HTML code.

scrollToElement(element): void {
    element.scrollIntoView({behavior: "smooth", inline: "nearest"});
}

For instance,

<a class="nav-link js-scroll-trigger"  (click)="scrollToElement(about)">About</a>

In this example, about refers to a template reference of the targeted element for scrolling.

<section id="about" #about>

Refer to the updated Stackblitz for more details.

Answer 2

Implement a function called scrollToElement() within the app.component.ts file and then invoke this function from the HTML code.

scrollToElement(element): void {
    element.scrollIntoView({behavior: "smooth", inline: "nearest"});
}

For instance,

<a class="nav-link js-scroll-trigger"  (click)="scrollToElement(about)">About</a>

In this example, about refers to a template reference of the targeted element for scrolling.

<section id="about" #about>

Refer to the updated Stackblitz for more details.

Answer 3

Answer №2

If you're looking to implement a basic bootstrap Scrollspy, here's a code snippet I just put together that might be helpful for you. Cheers!

function scrollSpy(v, e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $(v.hash).offset().top
    }, 500, function(){
        window.location.hash = v.hash;
    });
}

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
        });
    }, false);
})();

section {
  height: 250px;
}

nav ul {
  display: flex;
  list-style: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav id="rd-nav" class="scrollspy-nav">
        <ul>
            <li>
                <a class="nav-link" href="#rd-home" onclick="scrollSpy(this, event)">Home</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-how-we-work" onclick="scrollSpy(this, event)">How we work</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-what-we-do" onclick="scrollSpy(this, event)">What we do</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-portfolio" onclick="scrollSpy(this, event)">Portfolio</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-contact" onclick="scrollSpy(this, event)">Contact</a>
            </li>
        </ul>
    </nav>

    <article class="container">
      <section id="rd-home">Home | Section</section>
      <section id="rd-how-we-work">How we work | Section</section>
      <section id="rd-what-we-do">What we do | Section</section>
      <section id="rd-portfolio">Portfolio | Section</section>
      <section id="rd-contact">Contact | Section</section>
    </article>

    <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

If you're looking to implement a basic bootstrap Scrollspy, here's a code snippet I just put together that might be helpful for you. Cheers!

function scrollSpy(v, e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $(v.hash).offset().top
    }, 500, function(){
        window.location.hash = v.hash;
    });
}

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
        });
    }, false);
})();

section {
  height: 250px;
}

nav ul {
  display: flex;
  list-style: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav id="rd-nav" class="scrollspy-nav">
        <ul>
            <li>
                <a class="nav-link" href="#rd-home" onclick="scrollSpy(this, event)">Home</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-how-we-work" onclick="scrollSpy(this, event)">How we work</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-what-we-do" onclick="scrollSpy(this, event)">What we do</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-portfolio" onclick="scrollSpy(this, event)">Portfolio</a>
            </li>
            <li>
                <a class="nav-link" href="#rd-contact" onclick="scrollSpy(this, event)">Contact</a>
            </li>
        </ul>
    </nav>

    <article class="container">
      <section id="rd-home">Home | Section</section>
      <section id="rd-how-we-work">How we work | Section</section>
      <section id="rd-what-we-do">What we do | Section</section>
      <section id="rd-portfolio">Portfolio | Section</section>
      <section id="rd-contact">Contact | Section</section>
    </article>

    <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

Answer №3

I found success by placing the header tag and code directly into the index.html file. It definitely made a difference for me.

Answer 6

I found success by placing the header tag and code directly into the index.html file. It definitely made a difference for me.

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

Answer №1

Answer №2

Answer №3

Similar questions

App crashing when attempting to display an undefined value in an Ionic/Angular 2 application

Aframe's a-assets feature experiencing issues when loading dynamic data through Angular 2

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

Exploring the functionality of Kendo Grid within an Angular application

Creating a personalized design for Bootstrap Badge

Struggling with CSS due to the INCLUDE Function

Fan Animation in CSS

How to eliminate arrow icons from Bootstrap Carousel

Steps for altering the primary color in PrimeNG__Changing the primary color

Setting up a Form submit button in Angular/TypeScript that waits for a service call to finish before submission

Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

The CSS Image Gallery refuses to be centered

Blending an HTML jQuery toggle

What is the best way to generate a PHP loop that auto-populates content in a Bootstrap grid layout?

Problem with the Auto-fill Feature in PrimeNG Module

Managing traffic in Google Kubernetes Engine (GKE)

Can Angular components be used to replace a segment of a string?

The minimum and maximum validation functions are triggered when I am not utilizing array controls, but they do not seem to work when I use array controls

What is the best way to choose the initial and final <td> that appears within a <tr>?

What is the best way to ensure grid element takes up 100% of the available height within a flex column