Smooth-scrolling not working

web
mobile

Topic: Smooth-scrolling not working

Hani AbuDames pro asked 5 months 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 months 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 pro commented 5 months ago

this is my code


Arkadiusz Idzikowski staff answered 5 months 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.
Status

Answered

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