Slow down an html anchor link

Since nobody really answered this question before I'll answer with my discovery for people who need it.

All you have to do is normal anchor links like this

<a href="#bottom">scroll to bottom</a>

<p id="bottom">bottom</p>

then add this Javascript Code and if you need to change anything, look at the javascript comments

<script>
    $(function() {

        function filterPath(string) {
            return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
        }

        var locationPath = filterPath(location.pathname);
        var scrollElem = scrollableElement('html', 'body');

        // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
        $('a[href*=#]').each(function() {

            // Ensure it's a same-page link
            var thisPath = filterPath(this.pathname) || locationPath;
            if (  locationPath == thisPath
                && (location.hostname == this.hostname || !this.hostname)
                && this.hash.replace(/#/,'') ) {

                    // Ensure target exists
                    var $target = $(this.hash), target = this.hash;
                    if (target) {

                        // Find location of target
                        var targetOffset = $target.offset().top;
                        $(this).click(function(event) {

                            // Prevent jump-down
                            event.preventDefault();

                            // Animate to target
                            $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

                                // Set hash in URL after animation successful
                                location.hash = target;

                            });
                        });
                    }
            }

        });

        // Use the first element that is "scrollable"  (cross-browser fix?)
        function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i <argLength; i++) {
                var el = arguments[i],
                $scrollElement = $(el);
                if ($scrollElement.scrollTop()> 0) {
                    return el;
                } else {
                    $scrollElement.scrollTop(1);
                    var isScrollable = $scrollElement.scrollTop()> 0;
                    $scrollElement.scrollTop(0);
                    if (isScrollable) {
                        return el;
                    }
                }
            }
            return [];
        }

    });
    </script>

A bit of css did the job for me:

html { scroll-behavior: smooth; }

I found more useful information here:

https://css-tricks.com/snippets/jquery/smooth-scrolling/