【问题标题】:Fixed Header Issue When Scrolling To Anchor From External Page修复了从外部页面滚动到锚点时的标题问题
【发布时间】:2013-12-30 02:51:36
【问题描述】:

我最近为 http://c42d.com 重新设计了一个模板,这是我正在为一家名为 C42D 的公司构建的投资组合网站。我的问题涉及导航系统的滚动功能。

它在主页上正常工作。当您单击顶部导航中的任何链接时,它会完美地滚动到页面上的该部分,并且会考虑固定标题的高度。以下 Javascript 负责此功能:

        /** Hash Scroll */
        /** Portfolio Filter */
        $( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            if(!$( this ).attr( 'href' ).match(/^#/)) return;
            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 84;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 0;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        });

不幸的是,当您导航到网站上的任何内部页面(例如http://c42d.com/termsandconditions)并单击导航中的链接时,它会将您带到主页上正确的锚点,但没有考虑到固定标题的高度,标题部分被遮挡。

任何帮助将不胜感激。

谢谢! 赞

【问题讨论】:

  • 链接不会触发任何 javascript,因此无法运行任何计算顶部导航高度的代码。

标签: javascript jquery html css


【解决方案1】:

我要做的是在页面加载时检测散列(如果有),如果有,则运行相同的动画代码。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-12-11
    • 1970-01-01
    • 2023-04-05
    • 1970-01-01
    • 2023-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多