Question

我正在制作单页模板。我尝试使用Smooth Scrolling（http://css-tricks.com/snippets/jquery/smooth-scrolling/）在其上添加滚动效果，但它不起作用。我找不到问题，所以任何帮助表示赞赏。：）

这是滚动脚本;

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

这是我的functions.php文件;

<?php
function theme_js(){

  wp_enqueue_script('scroll_js', get_template_directory_uri() . '/js/scroll.js', array('jquery'), '',true);

}
    add_action('wp_enqueue_scripts','theme_js');

?>

这是我的菜单;

<body <?php body_class(); ?> id="page-top" class="index">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#team">Team</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

我也遇到了使用以下js代码突出显示每个活动菜单项的问题; 这里还有我项目的链接：http://modernbusiness.mburakergenc.com/

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

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

Answer 1

看起来你的PHP格式不正确。试试这个。

<?php
function theme_js(){

    wp_enqueue_script('scroll_js', get_template_directory_uri() . '/js/scroll.js', array('jquery'), '',true);

}
add_action('wp_enqueue_scripts','theme_js');

?>

此外，Wordpress在noconflict模式下加载jQuery。为了在你的scroll.js中提供jQuery，你的jQuery将需要被包装。在scroll.js中的第一行之前和最后一行之后添加这些行：

jQuery(document).ready(function( $ ) {
    // Your jQuery code here. Now it is safe to be using $ to refer to jQuery.
});

WordPress单页样式菜单滚动

1 个答案: