Scroll Smooth in Safari

Modify date: 2020-03-17


When editing my website, I wanted to scroll smoothly between sections, and when scrolling to top.

Solution 1

Basically, I found the simply way to achieve this with CSS properties:

scroll-behavior: smooth;

However, I noticed that Safari didn't support the CSS property "scroll-behavior". So I need a special way to achieve this.

Solution 2

I found the jQuery script to achieve such design.

<script src=""
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    $(document).ready(function () {
        $("a").on('click', function (event) {

            if (this.hash !== "") {

                var hash = this.hash;

                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function () {

                    window.location.hash = hash;