Topic: Smooth-scrolling not working
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"
],
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/
Answered
- User: Free
- Premium support: No
- Technology: jQuery
- MDB Version: 4.11.0
- Device: ASUS
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented a year 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 a year ago
this is my code