Почему встроенная css плавная прокрутка не работает в этом примере?

Question

Я пытаюсь применить свойство scroll-behaviour:smooth css к телу веб-страницы, но оно по-прежнему работает с мгновенной прокруткой.

Этот пример w3schools прекрасно работает для меня: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_scroll_behavior

Но мой jsfiddle не: https://jsfiddle.net/cs4b2nr0/1/

Я не могу понять, что не так с моей разметкой / стилями.

Answer 1

В соответствии с примером из W3school, вы должны добавить это свойство CSS к вашему HTML, а не к телу, бит для стороны sade, которую вы можете применить к обоим, проверьте это сейчас.

body,html {
  scroll-behavior: smooth;
}

<p id="a">a- <a href="#a">a</a> <a href="#b">b</a> <a href="#c">c</a> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipitLorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit.</p>

<p id="b">b - <a href="#a">a</a> <a href="#b">b</a> <a href="#c">c</a> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit.</p>

<p id="c">c - <a href="#a">a</a> <a href="#b">b</a> <a href="#c">c</a> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita enim praesentium, veniam fuga cumque maxime architecto delectus doloremque doloribus placeat vel voluptates, explicabo, veritatis deleniti impedit rerum harum minus suscipit.</p>