Smooth-scrolling not working

Topic: Smooth-scrolling not working

Hani AbuDames free 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 free commented 5 years ago

this is my code

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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:

<pre class="prettyprint"><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
 );
 });
 }
}
</code></pre>

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

<a href="https://mdbootstrap.com/docs/angular/" target="_blank">https://mdbootstrap.com/docs/angular/</a>

Please insert min. 20 characters.

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/

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Hani AbuDames

55Support score
4Questions 3Answers 2Snippets