平滑滾動以錨定在另一頁上

Question

在梳理了論壇和操作指南之后，我找到了一個平滑滾動問題的解決方案，但是我想問一些親切的人，如果下面的解決方案在我嘗試之前對我有用，或者如果我我錯過了一些重要的事情。

我正在一個現場工作，我不想創建問題或破壞任何東西，所以我想在我添加下面的代碼之前確定。 我對java或編碼也一無所知，如果我沒有使用正確的術語，請原諒我。

我想在另一個頁面上啟用平滑滾動到錨點。 例如，從我的主頁“domain.com/home”，單擊鏈接，然后加載新頁面，例如“domain.com/contact”，並在加載新頁面時，順利滾動到錨點“domain.com/contact ＃SECTION1" 。

目前，它只是跳轉，我想知道下面的步驟是否會啟用平滑滾動。

我打算：

1. 將以下代碼添加到網站模板的“部分”（在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？ 或者，無論如何添加此代碼都沒有壞處？

2. 然后將此代碼添加到模板中的相同部分：

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

3. 據我所知，這將實現平滑滾動，但我沒有添加任何像'smoothscroll.js'（我已經閱讀了很多） - 這也需要添加''（在我之后）將它上傳到服務器），還是包含在jQuery庫中？

如果這看起來很天真我很抱歉，我正在學習。 非常感謝任何對此提供反饋的人，我非常感謝您的時間和耐心。

最好，本

Answer 1

首先，Joomla已經加載了jQuery，因此您不需要再次加載它。 我要么使用Joomla擴展（ 這里有一個免費的 ）或使用平滑的滾動庫（ 就像這個 ）。 假設您選擇執行后者，您只需將Joomla模板中的鏈接放到JS文件中並初始化它（這在Github項目頁面上都有解釋）。

這兩個選項都很簡單但是如果你沒有很多編碼經驗，那么擴展可能是最好的方法。

編輯：要使用GitHub庫在頁面加載時使用smoothscroll，您需要將上一個函數更改為：

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