We Keep Coding

Scrollspy - Page messing up when linking nav bar page to outside url

I need help with JQuery, I believe this may be obvious solution but I don't know how to go about it. In regards to the nav bar on my scroller page, I want one of the links on the nav bar to go an external page (not to a section in the page). It will do this, but it messes up the scrolling page, (backgrounds move to the wrong section etc). I believe I have to change the refElement but I'm unsure.. Please help :( thanks
/*=========================================================================
Navbar ScrollSpy
=========================================================================*/
var scrollPos = $(document).scrollTop(),
nav_height = $('#navbar').outerHeight();
$('.navbar li a').each(function () {
var currLink = $(this),
refElement = $(currLink.attr('href'));
if( refElement.size() > 0 ){
if ( ( refElement.position().top - nav_height ) <= scrollPos ) {
$('.navbar li').removeClass('active');
currLink.closest('li').addClass('active');
}else{
currLink.removeClass('active');
}
}
});
});
//Initialize smoothscroll plugin
smoothScroll.init({
updateURL: false
});
-----------------------------HTML--------------------------------
<nav class="navbar navbar-fixed-top">
<div class=container>
<div class=navbar-header>
<button aria-expanded=false class="collapsed navbar-toggle" data-target=#nav-collapse data-toggle=collapse type=button><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 class="collapse navbar-collapse" id=nav-collapse>
<ul class="nav navbar-nav navbar-right">
<li class=active><a href=#intro data-scroll>Home</a>
<li><a href=#features-3 data-scroll>Marine</a>
<li><a href=#features-4 data-scroll>Industrial</a>
<li><a href=#contact data-scroll>Contact</a>
<li><a href="https://www.example.com" data-target>Careers</a></ul>
</div>
</div>

did some more digging around and found this snippet which works. thanks
/**
* Scroll Spy via Bootstrap
*/
$('body').scrollspy({target: "#nav_wrapper", offset:50});
/**
* Scroll Spy meet WordPress menu.
*/
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
// Selector for top nav a elements
$('#top_main_nav a').each( function() {
if (this.hash.indexOf('#') === 0) {
// Alert this to an absolute link (pointing to the correct section on the hompage)
this.href = "/" + this.hash;
}
});
}
/**
* Initiate Awesome Smooth Scrolling based on a.href
*/
$('a.smooth-scroll, #top_main_nav a').click( function() {
target = $(this).attr('href');
offset = $(target).offset();
$('body,html').animate({ scrollTop : offset.top }, 700);
event.preventDefault();
});

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.

Scroll when linked to id on same page

Note: I'm new to webdev and i'm building this site with bootstrap
I'm building a one page site and the navbar at the top directs the user to the relevant id. the problem i'm having is that i want it to scroll to the id when clicked (see http://www.blastprocessor.co.uk/). I also want to set the class as active when the user scrolls past a specific id.
I have no idea where to start but i'll post my html code here.
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="active">What We Are</li>
<li class="">Why Us</li>
<li class="">What We Offer</li>
<li class="">Contact Us</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Right Link</li>
</ul>
</div>
</div>
</nav>

You can use the following function to make your scroll animation. Regarding adding a class 'active' to the past id actually you can follow the answer of #ahb. For your need i just added a var reduce in the function which will help you reduce 50px from the actuall offset.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var reduce = 50;
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 - reduce
}, 1000);
return false;
}
}
});
});
ORIGINAL SOURCE
DEMO

Using JQuery:
See here to scroll and animate to your ID.
To add your class after scrolling past your ID use:
//assign the window and all the contents into variables
//instead of going and grabbing it from the DOM on every scroll
var $window = $(window),
$content = $('.content');
$window.scroll(function () {
$content.each(function () {
//for each element that has a class of content
//check its position and add SomeClass
if ($window.scrollTop() >= $(this).position().top) {
$(this).addClass('SomeClass');
} else if ($window.scrollTop() <= $(this).position().top) {
//if window position is less then remove it
$(this).removeClass('SomeClass');
}
});
});

Twitter Bootstrap with PLAY framework setting nav bar <li> elements to active

Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}

You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});

Trigger div on pageload

I have been trying to set the scroll of my page to a certain div. Kindly let me know how can i do that. Following is my code in which each each option in li moves to certain div . I tried this $("#header3").click(); in doucument.ready function but it didnot work.
Kindly help!
<ul id="navigation">
<LI><A class="home selected-lice"href="#header">Home</A></LI>
<LI>Partners</LI>
<LI><A class="about" href="#header5">About Us</A></LI>
<LI><A class="contact" href="#header6">Contact Us</A></LI>
</ul><!-- end of #navigation -->

Alternatively you can use this to scroll to specific element on page load with animation:
$(function(){
$('html, body').animate({ scrollTop: $("#header1").offset().top });
});

check this link:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
or try to overwrite the usual anchor behavior with some scrolling. Like this:
$(function(){
$('a[href^=#]').click(function(e){
var name = $(this).attr('href').substr(1);
var pos = $('a[name='+name+']').offset();
$('body').animate({ scrollTop: pos.top });
e.preventDefault();
});
});