Smooth-scrolling not working


Topic: Smooth-scrolling not working

Hani AbuDames asked 5 years ago

I try to use smooth-scrolling on my website but don't work.

What can I do?

I use jquery with angular

I set mdb.min.js, mdb.lite.min.js, jquery.min.js, bootstrap.min.js and same on cssat angular.json styles and scripts.

 <ul class="smooth-scroll list-unstyled">
  <li>
    <h5><a href="#test1">Click to scroll to section 1</a></h5>
  </li>


  <li>
    <h5><a href="#test2">Click to scroll to section 2</a></h5>
  </li>


</ul>

<!--Dummy sections with IDs coressponding with the links above-->
<div id="test1">
  <h3>Section 1</h3>
  <hr>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
</div>


<div id="test2">
  <h3>Section 2</h3>
  <hr>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
  <h5>Smooth Scroll Example</h5>
</div>

Angular.json

"styles": [
              "src/styles.scss",
              "src/assets/styles/4.11.0/css/bootstrap.min.css",
              "src/assets/styles/4.11.0/css/mdb.lite.min.css",
              "src/assets/styles/4.11.0/css/mdb.min.css",
              "src/assets/styles/4.11.0/css/addons-pro/chat.min.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.css"
            ],
"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "src/assets/styles/4.11.0/src/js/pro/cards.js",
              "src/assets/styles/4.11.0/js/bootstrap.min.js",
              "src/assets/styles/4.11.0/js/mdb.lite.min.js",
              "src/assets/styles/4.11.0/js/mdb.min.js",
              "src/assets/styles/4.11.0/js/addons-pro/chat.min.js",
              "node_modules/@fortawesome/fontawesome-free/js/all.js"
            ],

Arkadiusz Idzikowski staff commented 5 years ago

What is the exact problem with smooth scrolling and how can we reproduce that? Please provide more details about your project configuration and the code that you used to implement smooth scroll in your application.

We recommend to use Angular version of MDB instead of jQuery. MDB Angular provides a set of components that have been designed specifically for use in the Angular apps.

https://mdbootstrap.com/docs/angular/


Hani AbuDames commented 5 years ago

this is my code


Arkadiusz Idzikowski staff answered 5 years ago

It look like smooth scroll is not working in this case, because the scripts from jQuery version are initialized before Angular component is rendered.

However you can easily implement such feature in your component with this code:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-scroll';

  ngOnInit() {
    $('.smooth-scroll').on('click', 'a', function(event) {

      const href = $(this).attr('href');

      $('html, body').animate(
        {
          scrollTop: $(href).offset().top
        },
        700
      );
    });
  }
}

As I already mentioned in my previous comment - we recommend to use MDB Angular in Angular projects to avoid similar problems in the future.

https://mdbootstrap.com/docs/angular/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.11.0
  • Device: ASUS
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No