jquery - Scrollspy with ancor transition -
i have issue scroll spy , transition navbar specific anchor location. when ever click on portfolio tab cuts off , goes down fast though specified move in smooth animation. page cut out half way next one. scroll spy not follow when scroll. ideas why happening? have checked , have jquery in directory.
$('a').click(function(){ $('html, body').animate({ scrolltop: $( $(this).attr('href') ).offset().top }, 500); return false; });body { position: relative; } /*footer*/ .navbar-brand { padding: 0px; } .navbar-brand>img { height: 100%; padding: 15px; width: auto; } .huskynav .navbar-brand { height: 80px; } .huskynav .nav >li >a { padding-top: 30px; padding-bottom: 30px; } .huskynav .navbar-toggle { padding: 10px; margin: 25px 15px 25px 0; } /*deviders*/ .home{ height: 100%; padding-top: 150px; text-align: center; background: #423840; } .about { height: 100%; padding-top: 150px; text-align: center; background: #8dd8f8; } .service { height: 100%; padding-top: 150px; text-align: center; background: #9d714f; } .info{ height: 100%; padding-top: 150px; text-align: center; background: #eee; } .contact { height: 100%; padding-top: 150px; text-align: center; background: #fff; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script> <head> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="huskynav"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigate"> <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" href="#"><img src="img/teamhuskylogo.png" alt="team husky logo"> </a> </div> <div id="navigate" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">home</a></li> <li><a href="#myanchor" rel="" id="anchor1" class="anchorlink">portfolio</a></li> <li><a href="#service">service</a></li> <li><a href="#info">info</a></li> <li><a href="#contact">contact us</a></li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> </div> <section id="home" class="home"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>home</h1> </div> </div> </div> </section> <section id="about" class="about"> <div class="container"> <div class="row"> <div class="col-lg-12"> <a name="myanchor" id="myanchor"><strong>portfolio</strong></a> </div> </div> </div> </section> <section id="service" class="service"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>service</h1> </div> </div> </div> </section> <!-- contact section --> <section id="info" class="info"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>info</h1> </div> </div> </div> </section> <section id="contact" class="contact"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>contact us</h1> </div> </div> </div> </section> </body>
your solution works quite on code snippet, added portfolio section because had 404 reponse. mabe solve problem ?
$('a').click(function(){ $('html, body').animate({ scrolltop: $( $(this).attr('href') ).offset().top }, 500); return false; });body { position: relative; } /*footer*/ .navbar-brand { padding: 0px; } .navbar-brand>img { height: 100%; padding: 15px; width: auto; } .huskynav .navbar-brand { height: 80px; } .huskynav .nav >li >a { padding-top: 30px; padding-bottom: 30px; } .huskynav .navbar-toggle { padding: 10px; margin: 25px 15px 25px 0; } /*deviders*/ .home{ height: 100%; padding-top: 150px; text-align: center; background: #423840; } .about { height: 100%; padding-top: 150px; text-align: center; background: #8dd8f8; } .service { height: 100%; padding-top: 150px; text-align: center; background: #9d714f; } .info{ height: 100%; padding-top: 150px; text-align: center; background: #eee; } .contact { height: 100%; padding-top: 150px; text-align: center; background: #fff; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script> <head> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="huskynav"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigate"> <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" href="#"><img src="img/teamhuskylogo.png" alt="team husky logo"> </a> </div> <div id="navigate" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">home</a></li> <li><a href="#myanchor" rel="" id="anchor1" class="anchorlink">portfolio</a></li> <li><a href="#service">service</a></li> <li><a href="#info">info</a></li> <li><a href="#contact">contact us</a></li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> </div> <section id="home" class="home"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>home</h1> </div> </div> </div> </section> <section id="myanchor" class="home"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>portfolio</h1> </div> </div> </div> </section> <section id="about" class="about"> <div class="container"> <div class="row"> <div class="col-lg-12"> <a name="myanchor" id="myanchor"><strong>portfolio</strong></a> </div> </div> </div> </section> <section id="service" class="service"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>service</h1> </div> </div> </div> </section> <!-- contact section --> <section id="info" class="info"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>info</h1> </div> </div> </div> </section> <section id="contact" class="contact"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>contact us</h1> </div> </div> </div> </section> </body>
Comments
Post a Comment