Question

我有一个多页面的网站.. 所以我需要一个代码，用于在加载到另一个页面上的特定ID或部分后平滑滚动导航到另一个页面

e.g。在导航栏我有多个所以我将使一个页面包含来自导航栏的4个链接..所以我需要当我点击导航栏中的链接导航我到包含此链接的页面并顺利向下滚动到该部分包含此链接我点击它

我只使用html但没有平滑滚动..我只需点击导航栏中的链接，它就会导航到包含此链接信息的指定部分。在另一页

我不知道我的问题是否足够清楚，但我希望如此

Answer 1

现代浏览器检测网址中的哈希，然后自动打开该部分。因此，如果您想要平滑滚动到该部分，首先需要将滚动位置重置为0，然后添加平滑滚动。

添加以下script

// direct browser to top right away
if (window.location.hash)
    scroll(0,0);
// takes care of some browsers issue
setTimeout(function(){scroll(0,0);},1);

现在，尝试从其他页面访问锚点，您会注意到浏览器会将您带到页面顶部而不会滚动到锚点元素。

现在，添加平滑滚动：

$(function(){
//your current click function
$('.scroll').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({
        scrollTop:$($(this).attr('href')).offset().top + 'px'
    },1000,'swing');
});

// if we have anchor on the url (calling from other page)
if(window.location.hash){
    // smooth scroll to the anchor id
    $('html,body').animate({
        scrollTop:$(window.location.hash).offset().top + 'px'
        },1000,'swing');
    }
});

现在它将完美运作。您将被带到其他页面中的锚元素，并顺利滚动到该部分。

完成代码：

// direct browser to top right away
if (window.location.hash)
    scroll(0,0);
// takes care of some browsers issue
setTimeout(function(){scroll(0,0);},1);

$(function(){
//your current click function
$('.scroll').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({
        scrollTop:$($(this).attr('href')).offset().top + 'px'
    },1000,'swing');
});

// if we have anchor on the url (calling from other page)
if(window.location.hash){
    // smooth scroll to the anchor id
    $('html,body').animate({
        scrollTop:$(window.location.hash).offset().top + 'px'
        },1000,'swing');
    }
});

Answer 2

在您的 CSS 文件中只需添加-

html{
    scroll-behaviour : smooth;
}

并将href中的ID指定为

href="file_where_the_element_is.html#ID_of_the_element

例如：

<a href="index.html#contentID>

就是这么简单！！！没有 JS，需要 JQuery。只有 CSS 和 HTML

如何在特定ID上平滑滚动导航到另一个页面？

2 个答案: