javascript - Chrome 中的平滑滚动功能卡住了

标签 javascript jquery html css google-chrome

单击导航链接并滚动到目标后,我的页面上的平滑滚动功能似乎卡住了:

http://www.samnorris.net/portfolio-ss/

在 Chrome 中,鼠标滚动似乎会卡住大约 2-3 秒,然后由于某种奇怪的原因而松开。在 Firefox 中运行良好。

这是我的代码:

    ///////////////////////////////////////////////////////////////////////////
// Scroll Functions
///////////////////////////////////////////////////////////////////////////

if($(window).scrollTop()!=0){
    calculatepositionmenu();
};

$(window).on('scroll',function(){

    //Top menu
    calculatepositionmenu();

    //select menu section
    $("body section").each(function (index) {
        if($(this).isOnScreen()){
            $('#mainMenu a').removeClass('select');
            $('#mainMenu a[href="#'+$(this).attr('id')+'"]').addClass('select');
        }
    });
});


///////////////////////////////////////////////////////////////////////////
// Main menu scroll to
///////////////////////////////////////////////////////////////////////////

$("#mainMenu a,#mainheader a").on('click', function() {
    $("#menu-container").removeClass('open');
    if($(this).data("scrollto")){
        $('html, body').animate({
            scrollTop: $($(this).data("scrollto")).offset().top
        }, 1200);
        return false;
    }
});

HTML:

<div id="menuWrapper">
<section id="menu-container">
    <div class="container">
        <div id="mainMenu">
            <!-- Site logo-->
            <a class="menulogo logo" href="#" data-scrollto="#mainheader">
                <img alt="Sam Norris - Online Portfolio" src="$ThemeDir/img/menu-logo.png"></a>
            <nav>
                <!-- Principal menu -->
                <a href="#" data-scrollto="#about">The Man</a>
                <a href="#" data-scrollto="#services">The Plan</a>
                <a href="#" data-scrollto="#work">My Work</a>
                <a href="#" data-scrollto="#process">My Process</a>
                <a href="#" data-scrollto="#contact">Contact</a>
                <a href="#" data-scrollto="#blog">Blog</a>
            </nav>
        </div>
    </div>
</section>

如有任何帮助,我们将不胜感激。干杯。

最佳答案

您的服务器正在将您的主 javascript 文件标记为 http://www.samnorris.net/portfolio-ss/themes/portfolio/js/main.js由于包含恶意代码,因此将其返回为 403/404 - 因此您网站上的脚本不会加载。

查看浏览器的控制台窗口。这是它的屏幕截图:screesnhot

解决方案是自行更改服务器设置或联系您的主机。

关于javascript - Chrome 中的平滑滚动功能卡住了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42619336/

相关文章:

javascript - 未捕获的 TypeError : $. get(...).then 不是函数

javascript - 将 "Id"选定的复选框传递给模态 Bootstrap 并发送到 Controller

javascript - 使用 jQuery 选择出现多次的类

css - 为什么 -webkit-box-flex 属性对此不起作用?

html - 如何在响应式网页上以 Logo 为中心

javascript - 为什么 svg animateTransform 只在第一项上激活?

javascript - 在 WriteBatch 中写入同一个文档会导致在 Firebase 中进行多次写入?

javascript - canvas.todataURL 在第一次尝试时不起作用

javascript - 在过滤器方法中访问 vue 实例/数据

javascript - 检测无限递归?