Javascript 放慢html锚链接的速度

我在其他网站上看到过这个非常酷的功能，但我自己似乎找不到

我想通过一个锚标记滚动来链接到页面的不同部分，而不仅仅是跳转到所需的id。我想javascript文件可能会有帮助，或者可能是css转换，但我不知道转换元素是什么

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

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

底部

---

谢谢：）

因为没有人真正回答这个问题，所以我会用我的发现来回答需要它的人

所有你要做的就是像这样正常的锚链接

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

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

底部

然后添加此Javascript代码，如果需要更改任何内容，请查看Javascript注释

<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>

$（函数（）{
函数筛选器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
//其中包含哈希标记的任何链接（无法执行^=操作，因为具有完全限定的URL潜力）
$（'a[href*=#]'）。每个（函数（）{
//确保它是同一个页面链接
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
//确保目标存在
var$target=$（this.hash），target=this.hash；
如果（目标）{
//找到目标的位置
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
//防跳
event.preventDefault（）；
//为目标设置动画
$（scrollElem）.animate（{scrollTop:targetOffset}，400，function（）{
//动画成功后在URL中设置哈希
location.hash=目标；
});
});
}
}
});
//使用第一个“可滚动”的元素（跨浏览器修复？）
函数可滚动元素（els）{
for（var i=0，argLength=arguments.length；i 0）{
返回el；
}否则{
$scrollElement.scrollTop（1）；
变量isScrollable=$scrollElement.scrollTop（）>0；
$scrollElement.scrollTop（0）；
如果（可循环使用）{
返回el；
}
}
}
返回[]；
}
});

一些css为我完成了这项工作：

html { scroll-behavior: smooth; }

我在这里找到了更多有用的信息：

---

我是在手机上，所以代码是嵌入的，我不能更改它…但我确信你明白我的意思。我该如何使用它？作为一个onclick函数，只需像下面的onclck=“jQuery.ScrollTo（bottom）”那样放入一个id，为什么不阅读关于如何使用它的链接页面呢？这里的解释很好。