Question

在梳理了论坛和操作指南之后，我找到了一个平滑滚动问题的解决方案，但我想问一些亲切的人，如果下面的解决方案在我尝试之前对我有用，或者如果我遗漏了一些重要的东西。

我正在网站上工作，我不想创建问题或破坏任何内容，所以在添加下面的代码之前我想确定一下。我对java或编码一无所知，如果我没有使用正确的术语，请原谅我。

我想在其他页面上启用平滑滚动到锚点。例如从我的主页“domain.com/home”，单击链接，然后加载新页面，例如“domain.com/contact” 并在加载新页面时，顺利滚动到锚点“domain.com/contact#section1”。

目前，它只是跳转，我想知道以下步骤是否能够实现平滑滚动。

我打算：

将以下代码添加到网站模板的“部分”（在Joomla管理面板中）：

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

我不确定这是否必要，因为我已经在某些组件中使用了jQuery，是否不必再次加载jQuery？或者无论如何添加此代码都不会受到伤害？

然后将此代码添加到模板中的相同部分：

<script type="text/javascript" >
$('html').css({
display: 'none'
});

$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
  display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
  display: 'block'
});
}
});

function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
} 
</script>

据我所知，这将启用平滑滚动，但我没有添加任何类似'smoothscroll.js'（我已经阅读了很多内容） - 这还需要添加''（在我上传到服务器之后），还是包含在jQuery库中？

如果这看起来很天真我很抱歉，我正在学习。非常感谢任何对此提供反馈的人，我非常感谢您的时间和耐心。

最佳，本

Answer 1

首先，Joomla已经加载了jQuery，因此您不需要再次加载它。我要么使用Joomla扩展（there is a free one here），要么使用平滑的滚动库（like this one）。假设您选择执行后者，您只需将Joomla模板中的链接放到JS文件中并初始化它（这在Github项目页面上都有解释）。

这两个选项都很简单，但如果你没有很多编码经验，那么扩展可能是最好的选择。

编辑：要使用GitHub库在页面加载时使用smoothscroll，您需要将上一个函数更改为：

function smoothScrollTo(anchor) {
    var scroll = new SmoothScroll();
    scroll.animateScroll(anchor);
}

平滑滚动以锚定在另一页

1 个答案: