Smooth scrolling on Google Chrome

HTML-CSS
1

Hi again!

Hope everyone is well, I’m working on a practice site to help improve my familiarity with coding, and I came across this quirk when trying to get smooth scrolling to work

html {
 scroll-behavior: smooth;
}

it doesn’t seem to work on any of my browsers, and according to W3 it should be supported.

I’ve had to resort to using the cross-browser code mentioned on W3, but this feels like something I should address now.

Has anyone come across this before? I’ve got the latest version of chrome downloaded, and IE, so this is rather weird.

One thought is that it could be my computer (running on windows 7, haven’t updated in a couple months) but I’m unsure.

failing this, is there a way I can set the cross-browser code such that I can offset the scroll point? when I introduce a static/fixed header I tends to scroll in such a way that the header is blocking part of the image

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

fccforum-screenshot-D2
fccforum-screenshot-D2880×304 28.5 KB

Any advice will be greatly appreciated!

Cheers,

D.W.

2

It should work, not sure why it doesn’t for you. It would be helpful to see a live version of your page just to check it.

Does it work for you on the portfolio example page?

1 Like
3

Hello @lasjorg

Thanks for getting back to me!

I just tried it on the portfolio example you linked and it doesn’t work for me.

I hadn’t even paid attention to it until I tried to apply and realised it wasn’t working :confused:

The page is incomplete but here is a code pen I’ve just put up quickly

a quick note is that the only reason scrolling is working for me on this particular page is because I’ve got the Jquery script running, without that it doesn’t work :confused:

Cheers,

D.W.

4

@Daoist_Wakanda,

I removed your jquery code from your example and it seems to work on mine fine (chrome win 10).

If your using chrome, from what iv read it still supports windows 7 and will continue to do so until 2021, then will stop support due to obvious security risks due to windows 7 not being supported anymore, the lowest version of chrome that can use scroll behaviour is on chrome 61.0 so i would check the browser version just to make sure its all good.

Also try this link i made on sololearn https://code.sololearn.com/WszkPGyrSZw3/#html and then we can see if the issue is just with codepen or other sites too.

1 Like
5

In this D2 - Example Blogging page, your links are not pointing to a particular id href="#", did you check that?

1 Like
6

I have no idea why it wouldn’t work for you, other then using an unsupported browser (for Chrome and Firefox they would need to be really old versions).

Here is the MDN page it has an example as well you can test on (caniuse: scroll-behavior).

1 Like
7

Hi @bedward

Ah sorry I should have clarified, the links I was concerned about were the side navigation links; these are linked to different articles on the same page.

Cheers!

D.W.

8

Hi @biscuitmanz,

Thanks for your advice , my browser is up to date, which leads me to think that this is related to my OS. My inkling is this could just be the beginning of a list of incompatibilities that are going to come out as windows 7 loses support.

  • I’ve tried different browsers on my computer and same result
  • I then tried on my phone (pixel 2) and everything worked just fine

I think I’ll just have to chalk this on up to my laptop this time and test the functionality on my phone; it isn’t the end of the world without smooth scrolling after all.

At least until I can buy a new laptop

Thanks!

D.W.

9

Hi @lasjorg

Based on what I’ve been seeing and @biscuitmanz 's comments about windows 7 support, I’ve got a feeling it is my OS not working as it should on this front.

The MDN link didn’t work either but worked just fine on my phone, and I have checked that my browsers are all up to date.

Thanks for taking the time to look through this with me.

D.W.

10

Just to be clear, smooth scroll does not fix this issue. What happens when you click the links, does it just jump to the section or does it scroll down?

You can use scroll-padding, or use some other technique to fix the position.

1 Like
11

Perfect!

This is what I was looking for with my second question :slight_smile:, yes this was more about dealing with my persistent navigation bar blocking things as I scroll down.

Thank you!

D.W.