Smooth Scrolling Effect

  • mburakergenc

    (@mburakergenc)


    11 years, 5 months ago

    I’m working on a one page template. I tried to add scrolling effect on it using Smooth Scrolling (http://css-tricks.com/snippets/jquery/smooth-scrolling/), but it did not work. I couldn’t find out the problem, so any help appreciated. 🙂

    Here is the scrolling script;

    $(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;
      }
    }
  });
});

    Here is my functions.php file;

    <?php
function theme_js(){

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

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

?>

    Here is my menu;

    <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>
Viewing 1 replies (of 1 total)
  • Thread Starter mburakergenc

    (@mburakergenc)

    11 years, 5 months ago

    I also having a problem for highlighting each active menu item using the following js code;
    Also here is the link for my project: 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();
});
Viewing 1 replies (of 1 total)

The topic ‘Smooth Scrolling Effect’ is closed to new replies.