We Keep Coding

scrollTop duplicating values each time function is called

I have 2 divs that each time one of them is clicked it scrolls down to a common content div called .nbm_specs. The first time you click it scrolls correctly, however any subsequent clicks make the scrolling go crazy and it keeps scrolling up by a small amount each time.
It is acting like it is stacking the offset top each time you click on it.
I have established the scroll in a function that I then call in each .on CLICK function.
//hidel all at start
$(".prostar,.X10,.x20,.x23,.x30,.x46,.xstar").fadeOut(0);
//Scrol when clicekd
function SpecScrol(){
$('html, body').animate({
scrollTop: $(".nbm_specs").offset().top -80}, 1500);
}
//NAVIGATION SECTION FOR MODELS
$("#prostar").on('click', function() {
$(".prostar").fadeIn(0);
$(".X10").fadeOut(0);
SpecScrol();
});
$("#X10").on('click', function() {
$(".X10").fadeIn(0);
$(".prostar").fadeOut(0);
SpecScrol();
});
Thanks in advance

SOLVED.
The issue was that there are multiple .nbm_specs div and the code wasn't sure which to go to and getting all confused. Fixed this by creating a blank div just above the .nbm_specs div with a unique id.

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks

function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

Automatic scroll the page to a div after 5 seconds

I'm new in javascript, now I'm trying to do that, as the title, I've a page which has a div at the top that is as big as the page with a video in it, followed by several sections like this:
<div id="first" style="height:100%; width:100%"></div>
<section id="second" style="height:100%; width:100%"></section>
<section id="third" style="height:100%; width:100%"></section>
Now I need 5 seconds after the page is loaded to scroll automatically the page to #second.
I've tried many ways but have failed and haven't found nothing that works properly.
Thanks

I'm feeling generous, so I'll just give you the code this time.
$(window).load(function () {
//normally you'd wait for document.ready, but you'd likely to want to wait
//for images to load in case they reflow the page
$('body').delay(5000) //wait 5 seconds
.animate({
//animate jQuery's custom "scrollTop" style
//grab the value as the offset of #second from the top of the page
'scrollTop': $('#second').offset().top
}, 300); //animate over 300ms, change this to however long you want it to animate for
});

Use this at the end of your codes
setTimeout(function(){window.location.hash = '#second';},5000);
Note that those height:100%; are wrong.

You could use
window.location.hash = '#second';
This will set the focus. I'll leave you to put in some work on a timer solution.
Also, I would discourage any forcing of the user to focus on a particular div. This is not a very good UX practice and can lead to chasing users off your site, especially because they may not understand why the page is scrolling up.

$(function () {
setTimeout(function () { goToSecondTab(); }, 5000);
function goToSecondTab() {
window.location.hash = '#second';
}
});

Add HTML to this line in zzzzBov's script to make it work properly in FF:
$('html, body').delay(5000) //wait 5 seconds

Using jQuery-Smooth-Scroll from one page to another?

I am currently using jQuery-Smooth-Scroll to smoothly scroll up and down to various anchor positions on one of my pages (Page 1). However, what I would also like to be able to do is, from another page (Page 2), link to Page1 (appending #bookmark to the url) and have jQuery-Smooth-Scroll pick up on the fact I am calling the page with a #bookmark and have it smoothly scroll down to the relevant position once the page has completed loading. I don't know if this is a possibility or not?
This is the version of Smooth-Scroll that I'm using:
https://github.com/kswedberg/jquery-smooth-scroll
I'm still relatively new to jQuery so I may be overlooking something obvious.

Ajma's answer should be sufficient, but for completeness:
alert(location.hash)
Edit: a more complete example:
// on document.ready {
if (location.hash != '') {
var a = $("a[name=" + location.hash.substring(1) + "]");
// note that according to w3c specs, the url hash can also refer to the id
// of an element. if so, the above statement becomes
// var a = $(location.hash);
if (a.length) {
$('html,body').animate({
scrollTop: $(a).offset().top
}, 'slow');
}
}
// }

It's possible, you want to put a call into the smooth scroll function when the page is finished loading. in jQuery, it's using $(document).ready(function () { your code } );
You'll need to put something in to parse your url to extract the #bookmark and then call the smooth scroll.

HTML and jQuery anchoring

Whenever the url contains the div id, it would obviously go down to the div when the URL has:
http://domain.com.faq.php#1
<div id="1">Bla bla bla</div>
But what I like is to have same feature of Stackoverflow, when you click on an answer in your messages, it will scroll down to the page and has that fadeOut effect on the answer.
How do I do this?

Animation to a valid anchor destination cannot be animated on page load that I know of since the browsers will default to scrolling the user down the page to the anchor. For in-page links, you can hijack the anchor links and animate.
However, on new page loads like on SO, you will notice the page does not animate down, but just scrolls down, though the box does animate a color. This is how you could do it in jQuery. Be sure to include the color plugin if you want to animate background-colors.
<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
$(window).load(function(){
var hash = window.location.hash;
if(hash){
$(hash).css('backgroundColor', '#AA0000')
.animate({backgroundColor: '#FFFFFF'}, 200);
}
});
</script>
You can use DOMReady instead of load, but it might try to run your animation too soon, and the user will miss it.
If you only wanted to animate div's with a specific class, you can add a filter to your find:
$(hash).filter('.my_div').css ...

Use:
event.preventDefault();
For example:
$('li.share a').click(function(ev) {
ev.preventDefault();
var link = ev.target.href;
var id = link.substring(link.indexOf("#") + 1);
$('#' + id).fadeOut();
});

StackOverflow uses anchors as well. The post you're currently reading is:
HTML and jQuery anchoring
It's simply <a name="anchorName"></a>
at the address bar: [urlToPage]#anchorName
Now, to get the fade effect [in pure JS w/o frameworks]
Set the div.style.opacity = 0;
var intervalId = setInterval( function(){
if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);
The clearInterval part isn't necessary, since once opacity goes above 1, browser won't render differently [although the number keeps adding...]