Using scroll-behavior: smooth for only one page with CSS

user_4621507 0
Viewed 1567

When I enter the code

html {
    scroll-behavior: smooth;
}

I get the smooth effect that I want for anchor links. However, I only want this effect to apply to a single page, not my whole site. So I thought that perhaps this would work, using the class for the body tag of the single page that I want this effect on.

.landing-page {
    scroll-behavior: smooth;
}

However, once I do this the effect doesn't work, even though using the inspect tool shows that this attribute is applied to .landing-page. Why isn't it working, and what should I try next?

EDIT: Here is the HTML. I am trying to have it that I smooth scroll to #how-it-works and only that anchor.

<body class="landing-page welcome">
<div class="page first">
  <div class="container">
    <div class="heading">
      <a class ="anchor" id="how-it-works"></a>
      <span class="primary-text">
        You have before you the best system for deeply learning math.
      </span>
      <span class="secondary-text">
        Online, real tutors, at your own pace. Ask anything.
      </span>
    </div>
  </div>
</div>
</body>
css
2 Answers

Ok one of the issues on your code is that the smooth scroll is not supported by the body tag, try adding a class or an id to your html tag, or just add it on that page inline coded, but it really depends on what restrictions you would have.

html.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.container {
 width: 200px;
 marging: auto;
}
<html class="landing-page">
<body class="welcome">
<div class="page first">
  <div class="container">
    <div class="heading">
      <a class ="anchor" id="how-it-works"></a>
      <span class="primary-text">
        You have before you the best system for deeply learning math.
      </span>
      <span class="secondary-text">
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        
      </span>
    </div>
  </div>
</div>
</body>
</html>

Another way would be having the code in a div instead of the HTML, but you would have to do some workarounds for it.

.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: block;
  height: 100vh; // test with smaller heights
}
user_112944640

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

So you have two options.

  1. Either specify a CSS class like

    .smooth-scroll { scroll-behaviour: smooth; }

and put it on your HTML tag in that specific page (recommended way).

  1. Make your body a scrolling element:

    body { margin: 0; height: 100vh; overflow-y: auto; }

and place your CSS class on the body for that page.

user_37443040
Related