CODEWITHSUNDEEP
javascriptjqueryhtmlcss
azza74
azza74

Reputation: 3

Smooth Scroll Specific Links on One Page Website with JS

I am trying to smooth scroll from Nav to container ID and the page is scrolling. However, I have a bootstrap "list-group" that also uses href and id in a container. When I click on the href in the list-group it smooth scrolls and bugs out. Is there a way to smooth scroll SPECIFIC Id's just for the nav and block the list-group from reacting to the JS?

I have tried this and it doesn't seem to work smooth scroll to div with jquery

tried html { scroll-behavior: smooth;} but not compatible on all browsers

Using this code and it's working but bugging out how css smooth scroll jquery

Link to the index.html for this website with .js in body: index.html

thanks for your help

Upvotes: 0

Views: 318

Answers (1)

Cue
Cue

Reputation: 2759

There are two routes to avoid triggering smooth scroll on links other than the list-group.

1) the route you suggested by applying this functionality to the nav only:

$('a.nav-link').on('click', function(event) {
    ...
})

2) apply to all links excluding list group items:

$('a').not('[data-toggle]').on('click', function(event) {
    ...
})

Upvotes: 1

Related Questions