Develop Reference

Fixed NavBar on scroll using jQuery

I have my navbar on my page. I had used CSS and jQuery to fix it at the top but when I am selecting any menu item in navbar it doesn't go to that section. Give me the solution.
<header id="index-banner">
<nav id="navigation" class="banner-header z-depth-0 ">
<ul class="left hide-on-med-and-down">
<li><span>HOME</span></li>
<li><span>LOCATIONS</span>
<li><span>FAQ</span></li>
</li>
</ul>
<img src="img/logo/50.png" class="banner-logo" id="mylogo">
<ul class="right hide-on-med-and-down">
<span><li>MENU</li></span>
<span><li>CONTACT US</li></span>
<li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
<li>
<h5 id="call" class="head"><span>989898XXXX</span></h5>
</li>
</ul>
&nbsp&nbsp<i class="fa fa-bars"></i>
<div id="slide-out" class="side-nav hide-on-large-only">
<img src="img/logo/50.png" id="side-nav-logo">
<img src="img/divider/green.png" class="divide">
<ul>
<span><li>HOME</li></span>
<span><li>LOCATIONS</li></span>
<span><li>MENU</li></span>
<span><li>FAQ</li></span>
<span><li>CONTACT US</li></span>
</ul>
</div>
</nav>
<img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
</header>

You have to define each section with the "id" attribute and then you have to use the "scrollTop" for those navigation which will scroll to those defined "id".
HTML Code
Scroll to Target Element
<section id=”target-element”>Target Element Content</section>
Jquery Code:
jQuery('.scroll_to').click(function(e){
var jump = $(this).attr('href');
var new_position = $(jump).offset();
$('html, body').stop().animate({ scrollTop: new_position.top }, 500);
e.preventDefault();
});

Close responsive menu after click on menu item

I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.
The js:
$(document).ready(function() {
var n = '#nav', no = 'nav-open';
$('#nav-menu').click(function() {
if ($(n).hasClass(no)) {
$(n).animate({height:0},300);
setTimeout(function() {
$(n).removeClass(no).removeAttr('style');
},320);
}
else {
var newH = $(n).css('height','auto').height();
$(n).height(0).animate({height:newH},300);
setTimeout(function() {
$(n).addClass(no).removeAttr('style');
},320);
}
});
});
The HTML:
<!-- Navigation Bar -->
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">☰<!-- menu symbol --></a>
<a class="nav-menu">Menu</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

change
$('#nav-menu').click(function() {
if you want that your menu close only by clicking on the li element
$('#nav li').click(function() {
or if you want to close menu with both li and menu icon
$('#nav-menu, #nav li').click(function() {

That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle() to slide down or up on click. Example:
$(document).ready(function() {
$('#nav-menu').click(function() {
$('#nav').slideToggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">
<span>☰</span>
<span>Menu</span>
</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

Anchor Point Jumps Instead Of Smooth Scroll

For some reason when i click my logo image which is the same anchor point link as 'Home' on my Nav Menu it jumps instead of smooth scrolling like 'Home' does when it's clicked.
Does anyone know why this is happening & how do i go about correcting this? Thanks in advance :)
<!-- LOGO -->
<div class="logo pull-left">
<img src="images/logo.png" class="logo" alt="">
</div>
<!-- //LOGO -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn">Home</li>
<li class="scroll_btn">About Us</li>
<li class="scroll_btn">Products</li>
<li class="scroll_btn">Team</li>
<li class="scroll_btn">News</li>
<li class="scroll_btn last">Contact</li>
</ul>
</nav>
</div>
<!-- //MENU -->

Add this to your existing ready function:
$(document).ready(function () {
$(".logo a").click(function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0,
scrollLeft: 0
}, 500);
});
});

Menu scrolls to div WITHOUT animation

So i got a onepage website which has menu points that scroll to a div on click. This is working so far. I implemented a jquery function that should give the whole thing an animation but somehow it does not work.
Here is the HTML:
<div class="mainmenu">
<div class="menuwrapper">
<div class="menulist">
<ul class="items">
<li class="menuitem">
HOME
</li>
<li class="menuitem">
TEAM
</li>
<li class="menuitem">
LEISTUNGEN
</li>
<li class="menuitem">
KNOW-HOW
</li>
<li class="menuitem">
KONTAKT
</li>
</ul>
</div>
</div>
</div>
and this is the js:
$(document).ready(function(){
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500, "swing");
return false;
});
$(window).resize(function(){
sliderResize();
});
});
someone has an idea?

The problem is that when clicking on the <a> tag, it still does what an <a> tag does... bring you to the link (in this case an anchor tag).
To avoid the default link action, you need to add code to prevent it:
$('a').click(function(e){
e.preventDefault(); // This will stop the default jump to anchor
// Now you can add your smooth scroll animation
Read the preventDefault() documentation for more information.

Smooth Scroll to Top & Hide <div> Upon Click

So I have it working perfectly when you click the "back to top" arrow, it hides the menu, but I just want it to do a smoothscroll to the top of the page upon click in addition to that. You can test out what I currently have at http://rac.site44.com just readjust the width so you are in a mobile view (its responsive) and click the top-right "menu" icon to see the arrow.
Here is the HTML
<div class="col_4 no-padding">
<a href="/">
<img class="logo" src="img/clear.gif" alt="RAC-Engineering - Structural Engineer Buffalo NY">
</a>
<a class="nav-toggle"><span class="mobile-nav-toggle mobile-only"></span></a>
<a class="nav-toggle2 hidden"><span class="mobile-nav-toggle mobile-only"></span></a>
</div>
<div class="col_8 no-padding last">
<nav id="nav" class="nav mobile-hide">
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
<li>Estimate</li>
<li class="top mobile-only"></li>
</ul>
</nav>
</div>
and the JS: (Obviously I'm assuming you just need a line of code telling it to scroll to top after the $("li.top").click(function(e) { but I can't seem to figure it out)
$(function() {
$("li.top").click(function(e) {
$("#nav").addClass('mobile-hide');
$(".nav-toggle").removeClass('hidden');
$(".nav-toggle2").addClass('hidden');
e.preventDefault();
});
});
Thanks for the help!

I just tested this on your site:
$("html, body").animate({ scrollTop: "0px" });
You can read about .animate() here: http://api.jquery.com/animate/