0

Hi guys so i am trying to do some js work and learn and i wanted to create a simple navbar so when the user clicks on it , it will take them to that section of the screen, which is all on one page, however the way i have done it seems very long and bad and i was wondering if there is an easier way to do it? or maybe a library that does it for you etc. If anyone could show me a tutorial or something that could help

Fiddle

html:

 <nav class="navbar navbar-default" data-spy="affix" data-offset-top="10"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> <li><a href="#d">d</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div>

JS:

$(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#navbar a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#navbarr ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }

css:

affix { top: 0; width: 100% } .affix + .section { margin-top: 68px; } .navbar { margin-bottom: 0px; left: 0; top: 0; width: 100%; list-style: none; height: 70px; z-index: 1 } .navbar-nav { float: none; margin: 0; text-align: center } .navbar-nav>li { float: none; display: inline-block } .navbar-nav>li>a { line-height: 38px } .navbar-nav>li>a.active { background-color: #E7E7E7 } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #333333; background-color: #E7E7E7 } .navbar-toggle { background-color: #000000; background-image: none; border-radius: 4px; float: right; margin-bottom: 8px; margin-right: 15px; margin-top: 18px; padding: 9px 10px; position: relative } .navbar-inverse .navbar-toggle .icon-bar { background-color: #2DCC70 } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000000 } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: transparent } #a{ height: 700px; background-color: Red; } #b{ height: 700px; background-color: blue; } #c{ height: 700px; background-color: yellow; } #d{ height: 700px; background-color: black; }
Improve this question

2 Answers 2

Reset to default
3

You should be able to use this code snippet to smoothly scroll to the desired element on link click:

$("#navbar a").click(function(event) { event.preventDefault(); $('html, body').animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); });

jQuery scroll to element

Working example: https://jsfiddle.net/345jpqwo

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I seem to be trying this but i cant seem to get it work for some reason arggg
As you can see from the fiddle : jsfiddle.net/4h04uzza/13 , I tried something but now it seems it jumps to it and also the nav bar dosent highlight the key parts
You had some syntax errors (gotta comment out that english text) and were missing the preventDefault call. jsfiddle.net/345jpqwo
Ah ur amazing , just one more question, it seems the active class those is gone, so when they get to the second section b should light up and then c etc, it was working before , however now it seems to have gone
Still nothing :( when you scroll it dosent go to the right element, i am trying to work on it now is well but the fiddle u sent isent working unfortunately
|
1

You can use this 

$('ul.navbar-nav>li').find('a').click(function(){ var $href = $(this).attr('href'); var $anchor = $('#'+$href).offset(); $('body').animate({ scrollTop: $anchor.top },1000); return false; });
Improve this answer

2 Comments

This works but its not smooth scrolling which i would like, this jumps to the desired element rather then scroll down
Works fine for me including animation. However you can check those links codepen.io/claviska/pen/cybdG stackoverflow.com/questions/6677035/jquery-scroll-to-element

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.