我最近改编了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)并单击导航中的链接时,它会将您带到主页上正确的锚点,但不会考虑到固定标题的高度,标题变得部分模糊。
非常感谢任何帮助。
谢谢! 咱
答案 0 :(得分:0)
我要做的是在页面加载,检测哈希(如果有的话),如果有,那么运行相同的动画代码去那。