页面滚动和 JQuery

Question

使用 Codeigniter / PHP 和 this Bootstrap template。此模板包括主页上的页面滚动功能。

我有一个header.php 模板，用于在每个页面上显示主导航。

这个主导航代码；

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a class="page-scroll" href="#home">Home</a>
        </li>
        <li>
            <a class="page-scroll" href="#items">Items</a>
        </li>
        <li>
            <a class="page-scroll" href="#features">Features</a>
        </li>
        <li>
            <a class="page-scroll" href="#contact">Contact</a>
        </li>
    </ul>
</div>

Jquery 代码；

(function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 100
    });

    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a').click(function() {
        $('.navbar-toggle:visible').click();
    });

    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 50
        }
    })

})(jQuery); // End of use strict

一切都按预期工作，但仅在主页上 (home.php)。

我需要创建一些额外的页面（例如items.php），这是标题导航不起作用的地方。

当我访问items.php 并将鼠标悬停在Contact 菜单链接上时，URL 是/items#contact。它正在寻找items 页面上的#contact 锚点。相反，我想转到home 页面上的#contact 锚点。

因此，为了使这项工作正常进行，我将<?php echo base_url();?> 添加到我的菜单链接中——使它们成为<a class="page-scroll" href="<?php echo base_url();?>#items">Items</a>。我的主页网址是http://localhost/ci

这行得通，当在items 页面上成功将我带到home page 上的正确锚点时。

但是好像在添加<?php echo base_url();?> 之后，主页滚动不起作用。单击链接会将我带到正确的锚点，而不是滚动它“跳转”。

可能很简单！有什么想法吗？

Answer 1

您可以使用此功能。它使用 javascript 路径名来查找当前页面是否为主页。如果当前页面是主页，它将滚动到所需位置，否则它将导航到主页。 （使用您的主页路径名而不是“/”）

	(function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $(document).on('click', 'a.page-scroll', function(event) {
		/*******USE YOUR HOMEPAGE PATHNAME HERE*****/
		if(window.location.pathname == '/') {
			var url = $(this).attr("href");
			var hash = url.split('#')[1];
			$('html, body').stop().animate({
					scrollTop: ($('#' + hash).offset().top - 50)
				}, 1250, 'easeInOutExpo');
				event.preventDefault();
			}
        
    });

})(jQuery); // End of use strict