We Keep Coding

External links won't open

I am a noob with anything JS, I have a menubar for a onepage website that works to scroll the page but will not open external links, could one of you guys please help? Code Below, site can be viewed at http://protocol-labs.com/new
html
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Services</li>
<li class="">About</li>
<li class="">Testimonial</li>
<li class="">Contact</li>
</ul>
</div>
js that is causing the issue
(function ($) {
// Add smooth scrolling to all links in navbar
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar-default").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
})(jQuery);

You have prevent default attached to your anchor event. This prevents the link from working.
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
event.preventDefault(); // prevents link from working. Remove it and you should be good.

Try to add a special class to all links with anchors (the first 4 ones) and call the function just by clicking these links, keeping the standard behavoir by clicking at Contact

I modified both js as well as html codes: (I guess this code is part of Medilab+ Template)
JS / JQuery
(function ($) {
// Add smooth scrolling to all links in navbar
$(".navbar2").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar-default").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});})(jQuery);
HTML Code:
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Services</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>

jQuery scrolling down on click of an item

I have a very long HTML page with content. What I am trying to achieve is when someone clicks a menu item in the header, the page should scroll down to an anchor element. I have try many things with no luck. I don't know JavaScript. This is what I tried:
_header.html.erb
<div class="header_pad">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>The Investors' Club</h1>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a id="result" href="#contact">Contact</a></li>
</ul>
</section>
</nav>
</div>
application.js
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#result").click(function() {
scrollToAnchor('contact');
});
index.html.erb
<div id="contact">
<%= image_tag("contact_us.png", :alt => "Forex Investment Contact") %></br>
<p class="small-11 small-centered columns">
Skype is free and more convenient, give us a call or send us an email if you happen to have some questions. We will
be glad to hear from you.
</br>
<%= image_tag("skype.png", :alt => "skype") %> OR
<b>100forexinvestors#gmail.com</b>
</p>
</div>
Live page: https://infinite-oasis-2303.herokuapp.com
So I want it that when I click "Contact" in the header, it scrolls smoothly all the way down to the Contact anchor down below the page. Any help?
EDIT:
I got it to work with the js I posted as an answer. However. If I click on the back button and click another link, the animation doesn't work anymore till I reload the page. Looks like the javascript loads just once. How do I eliminate that?

Seems you have typo <a name"test"></a>. Try change it to <a name="test"></a>
EDIT
Since the question edited, this is the example for application.js:
$(document).ready(function() {
$('.top-bar-section a').click(function(e) {
e.stopPropagation();
var eid = $(this).attr('href');
var top = $(eid).offset().top;
$('html, body').animate({ scrollTop: top }, 'slow');
});
});
Make sure the anchor href and target id is equal. E.g: <a href="#contact"> for <div id="contact">

this might help,
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},500);
Pass "time" as the second argument to the animate function. It should navigate to the target location in that much amount of "time". Thus helping smooth transition.

OK. I got it to work with this piece of js:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
});

top left logo scroll to stop of screen

I am trying to add some text on the top left corner of my nav bar. Upon click, I want the page to automatically scroll back up to the top of the page
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<a id="logo" href=".navbar">LOGO HERE</a>
<ul id="nav_pills" class="nav nav-pills" role="tablist">
<li role="presentation">
<a id="test" href="#services">Services</a>
</li>
<li role="presentation">
About
</li>
<li role="presentation">
Portfolio
</li>
<li role="presentation">
Team
</li>
<li role="presentation">
Contact
</li>
</ul>
</nav>
My JS so far:
$(document).ready(function() {
// easing scroll bluhd
var hrefObjects = $("li a");
hrefObjects.push($(".welcome-btn"));
hrefObjects.push($("#logo"));
hrefObjects.each(function() {
$(this).on("click", function(e) {
var mode = "easeInOutQuart";
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 750, mode);
});
})
});
I am currently getting this error and I am not sure how to fix this.
Uncaught TypeError: Cannot read property 'top' of undefined

.push() is not a valid jQuery function. hrefObjects is a jQuery object, not an array.
Simplify it to:
$(document).ready(function() {
$("li a, .welcome-btn, #logo").on("click", null, function(e) {
$('html, body').animate({ scrollTop: 0 }, 750, "easeInOutQuart");
return false; // prevents default
});
});

This is really easy to do, using the jQuery animate() method. Here's an example of how you could do it - very simple.
$(document).ready(function(){
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
.scrollToTop{
font-weight: bold;
text-decoration: none;
position:fixed;
top:0;
left:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Company Name
Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>
Hope this helps, and comment below if I can help you further.

using animate function on href click

I have a code which slides to a particular div on page load . I am trying to modify that code . I wish to slide it to particular div on click event of href.
JS Fiddle Link
Javascript
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
HTML
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
<li><a href="#"> on click<a/></li>
</ul>

There are two things to note here. If you give your <a> a link to a blank anchor, href="#", it will automatically send you to the top of the page.
So in order to do this, you need to get rid of that.
<a>on click</a>
It will still work if you don't remove the href="#", but it will jump to the top of the page and back before it scrolls, which is unsightly.
The other thing you need to do is bind the event to the <a>
$(document).ready(function () {
// Handler for .ready() called.
$("a").click(function(){
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
});
JSFiddle

TRY this. Here I am add a new id for your tag ( recommended ) called on_click_a or you can use $('a) instead of $('#on_click_a')
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
<li><a href="#" id='on_click_a'> on click<a/></li>
</ul>
$(document).ready(function () {
// Handler for .ready() called.
$("#on_click_a").click(function(){
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
});

Javascript
$(document).ready(function () {
$('#clicky').click(function() {
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
});
HTML
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
<li><a id="clicky" href="#"> on click<a/></li>
</ul>

Left animation on click li

I have a menu structure:
<ul id="creamenu" class="menuHolder">
<li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
<li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
<li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
</ul>
<ul id="mainmenu" class="menuHolder">
<li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
<li><a id="about2-menu" href="#/haberler">about 2</a></li>
<li><a id="about3-menu" href="#/galeri">about 3</a></li>
<li><a id="about4-menu" href="#/referanslar">about 4</a></li>
<li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>
I have a content structure in same HTML file:
<div id='news-1'>
<!-- content -->
<!-- content -->
</div>
<div id='news-2'>
<!-- content -->
<!-- content -->
</div>
I want, when i click a item e.g. creamenu item, go to div. E.G.
click news-1 item, go to news-1 div. Like this: http://codecanyon.net/item/fancyscroll/full_screen_preview/370241
Is it possible it with pure jQuery?

It's absolutely possible. Try this:
$('#creamenu a').click(function(e) {
var splitId = $(this).attr('id').split('-'),
contentId = splitId[0] + '-' + splitId[1];
e.preventDefault();
$('html, body').animate({
scrollTop: $('#' + contentId).offset().top
}, 'slow');
});
Using this specific approach, you will need to ensure that the id of your link in the #creamenu is prefaced with the id of its corresponding content (as you are doing now).
It would also be more robust to just put the id of your content in the href of the #creamenu link. That way, if the user doesn't have JS active, it would still jump to the content, albeit without an animation. For example:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
Then, your JS would be as follows:
$('#creamenu a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 'slow');
});

<li><a id="news-1-menu" href="#news-1">news 1</a></li>
With the id as href the page just jumps to the target box. Use a plugin like scrollTo to make it scroll smooth.

You can, but you need some minor changes to your code.
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('href') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And change link structure, so href is and id of an element you would like to scroll to.
You could also make a links looks like this:
<li><a id="news-1-menu" href="#/creative-events" rel="#news-1">news 1</a></li>
And use rel atribute to find an element, You would like to scroll to:
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('rel') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And if you are looking for a parallax effect: http://jessandruss.us/, checkout tutorial here: http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/ or here: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

Yes, just change your href attributes to the ID of the element:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
To scroll smoothly, try:
$('a[href^=#]').on('click',function(e) {
e.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('html,body').animate({'scrollTop':top}, function() {
window.location = id;
});
});