0

I've recently installed the smooth-scroll library from cferdinandi and the smooth-scroll feature works like a charm.

The anchors added to my text using a CMS where looking like this:

<span id="authentication" class="ancre"></span>

The ID being different each time, regarding what I'm talking about in my text. And it works fine.

My problem is that the smooth-scroll library seems to remove the class when it runs, therefore my class='ancre' does not show when the anchor is called. Class being:

.ancre:target{
    background-color: #131b24;
    color: white;
}

So what I did it that I removed the "target" parameter of my class and added a function to my JS file to add the class after the smooth-scroll is run. It looks like this:

CSS in css/app.css

.ancre{
    background-color: #131b24;
    color: white;
}

JS in js/app.js

after: function () {
    var className = 'ancre';
    document.querySelector('.' + className).classList.remove(className);
    document.getElementById(anchor.id).classList.add(className);
}

But it does not work and I just couldn't figure out why.

You can try it by pressing the buttons "2-step authentication" and/or "Mobile" on this page.

I'm not a coder, more a designer and I would be happy to get some help here.

Thank you all for your help,

Best, Kwint

Quentin Beau Kwint
  • 121
  • 1
  • 2
  • 9
  • Are you willing to use vanilla JS? Don't need a library to smooth scroll – Gezzasa May 07 '18 at 06:19
  • I agree, I am also using this library because I don't want my anchor to get stuck at the top on the screen. And since I'm using a background color in the targeted anchor, adding padding to my class just extends the background-color unpleasantly. Also, I;m not a coder and a library is the easiest way for me. – Quentin Beau Kwint May 07 '18 at 06:21
  • Tried giving a descriptive answer. Hope it helps :). I can explain more(try) if need be. – Gezzasa May 07 '18 at 06:38

1 Answers1

0

You can use the scrollIntoView javascript function without the need for a library.

https://codepen.io/gezzasa/pen/gzXPbJ/

first I had to set the containers to position: relative; and then set the anchor to position: absolute; top: 0;. with the option on the JS set to block : 'center' it will now only scroll till the anchor is in the middle of the screen.

var smoothScroll = function(e, me) is the function I declared and gets fired on the onclick of the a tag. There are different ways to run the function but this is easy enought. I passed in event on the onclick for the event(event thats fired when you click) and this to tell the script what I clicked on.

e.preventDefault() will prevent the a tag from firing its default function which will reload the page with the href provided. in this case it will append an ID without that script.

document.querySelector(me.getAttribute('href')) will get the ID that it needs to scroll to and then the scrollIntoView function will scroll according to the options that you give it.

Hope I explained it well...I don't have a ton of experience explaining JS.;

Gezzasa
  • 1,443
  • 8
  • 17
  • Thank you for this codepen. I tried it and it smooth scroll in Chrome but not in other browser. Although what I need is to be able to have my anchor in the middle on the screen, not at the top. Which the library I'm using is doing fine. What I'm trying to solve here is adding back the class to my anchor. All the rest works fine. – Quentin Beau Kwint May 07 '18 at 06:42
  • Okay, I understand what you need. I could have sworn that the option to scroll to the middle worked for this but I see now it doesn't. Look here. https://stackoverflow.com/a/8923993/1379450 – Gezzasa May 07 '18 at 07:01
  • Thank you Gezzasa for your effort. I just don't know how to use this along with the smooth scroll script. Right now I have something that work -which is already quite an achievement for me- and I think my script to add a class is almost correct. I wish I could find a way to make it work. – Quentin Beau Kwint May 07 '18 at 07:16
  • No problem. Glad you got yours working apart from the class add thing. Just to add, you don't need any libraries with my solution. if you still need to add a class, that can easily be added to the script. – Gezzasa May 07 '18 at 07:23