Develop Reference

Scroll to a specified div ONLY in bootstrap using Javascript

I am using simple Javascript to automatically scroll to a specific div within a page utilizing bootstrap.
$("button").click(function(){
$('html,body').animate({
scrollTop:$(".*specific div*").offset().top},
'slow')
});
It works like a charm for the first button, but the script seems to continue on and scroll to every specified div that the script directs toward. Is there any way to cause the script to go to only scroll to each specified div?
Thanks.

if i understand your question this is what you can do use anchor tag and add specfic div's id in href attribut
<a class="class-for-all-a" href="#about">About</a>
<div id="about"></div>
$('.class-for-all-a').click(function (event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
scrollTop:$("'#' + trgt").offset().top},'slow');
});

Using a parameter in URL to scroll to div (mimicking an anchor behavior)

I'm using a jQuery tabs plugin that uses anchors so that you can define which tab should be open by default.
But if the interface is below the fold, it doesn't scroll into view. I tried adding an anchor tag above the interface, but I can't get it to highlight the appropriate tab AND scroll into view.
Since I can't use two anchors, my thought was if I wanted to provide a link to scroll into view I could include a parameter in the URL, like this:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2
(where "Interface" might be the name of an anchor of id name at the top of the interface)
I googled and searched stackoverflow and couldn't find anything. Is there some sort of script that would allow this to work? Or is there a better way to do this?
Here's a working example:
http://stage.ravencreative.com/scroll/Index.html
This makes the second tab active:
http://stage.ravencreative.com/scroll/Index.html#parentHorizontalTab2
(#parentHorizontalTab2 is what makes the second tab open by default)
This scrolls to the tabbed interface:
http://stage.ravencreative.com/scroll/Index.html#Interface
(#Interface is the anchor at the beginning of the interface)
But I can't get both to work at the same time. Any suggestions? Is there a way to do something like:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2 where a script picks up on the scrollto parameter and scrolls to it?
Something like (I'm using English since I am not familiar with the code construct):
if scrollto is found in the URL
then scroll to the anchor defined in the scrollto

You can use a variety of #tabConditionSelector conditions as you described, then on document.ready you can read it and scroll / select and anything else on a case-by-case basis.
Using jQuery:
$( window ).load(function() {
var hash = window.location.hash;
if (hash == "#parentHorizontalTab2") {
var top = document.getElementById("Interface").offsetTop; //Getting Y of target element
window.scrollTo(0, top);
} else if (hash == "#parentHorizontalTab3") {
//select tab 3 etc
}
});

You can use this to scroll to specific location on load from link hash
$(window).load(function () {
var hash = window.location.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 'slow');
});

AJAX Transition Effect

I'm trying to get this transition effect working with AJAX but the effect doesn't work with it. I essentially have a wrapper class and an innerwrap class in each of my html pages. When you click one of the navbar items, the innerwrap in the current page fades out and the innerwrap in the clicked navbar link fades in. Here is my script:
$(document).ready(function () {
$('#navbar a').click(function () {
var url = $(this).attr('href');
$('.wrapper').fadeOut('.innewrap').load.fadeIn(url + ' .innerwrap');
return false;
});
});
The way I'm seeing it is that the current innerwrap fades out and the innerwrap of the clicked url fades in. I've been struggling with finding a solution through different questions here but I can't seem to find one that's similar to the way I have the code presented. If you can't help but can guide me towards a question where the code is kind of similar that would be awesome. Thank you!

Maybe I'm wrong, but what you do in your code is fading in something like http://example.com/ .innerwrap and that's because you are using url variable where you put value of href attribute from a element.
Try using .load(url, function(){}) to achieve what you want. HERE you'll find more about load() from jQuery ;) Also your fadeIn() and fadeOut() syntax seem to be a little strange.
I think this is more what you want:
$(document).ready(function () {
$('#navbar a').click(function () {
var aObj = $(this);
var url = $(this).attr('href');
$('.wrapper').load(url, function(){
$(this).find('.innerwrap').fadeOut();
$(a).find('.innerwrap').fadeIn();
});
return false;
});
});
I haven't tested this code.

How to control the scrolltop javascript function?

I'm using the Pagify.js plugin, which helps create one page websites by using jquery to pull several html files inside a container div without the browser having to refresh the whole page.
The problem is that I'm trying to scroll to the nav bar div when a link is clicked, and I'm getting odd results. Here is the plugin and HTML jsfiddle. Here is the code I'm using to scroll (I'm not sure where to put it)
$('html, body').animate({scrollTop:$('#nav').position().top});
http://jsfiddle.net/5y9HT/
If I paste the scrollTop code in different places in the pagify.js, different things happen, none of which behave exactly right.
I'm trying to achieve a situation where it will scroll to the nav div if a link is clicked, but will not scroll if the browser is refreshed (it should already be there. Just like on this site: http://www.madebysofa.com/archive/index.html

I think you want #nav's offset, not it's position:
$('.content').on('click', 'a', function(a){
a.preventDefault();
$('content').get('newPage.html');
var nav_position = $('#nav').offset();
console.log(nav_position);
$(document).animate({
scrollTop: nav_position + 'px';
});
});
You might still be able to use your position().top in the same manner.
$('.content').on('click', 'a', function(a){
a.preventDefault();
$('content').get('newPage.html');
var nav_position = $('#nav').position().top;
console.log(nav_position);
$(document).animate({
scrollTop: nav_position + 'px';
});
});

try this,
$('html, body').animate({scrollTop:$('#nav').offset().top}, 1000);
you can also use document instead of specifying both 'html', and 'body'. Hope it works.

Scroll to Fieldset When Link is clicked

so I have an example of what I have so far here
obvious this is not working because the PHP, let alone the jQuery.
its just to show what I am doing.
I want to be able to click on the href, and this will scroll to the fieldset with the appropriate title.
Can anyone help, seems simple but cant get it to work ?

Apply an id to each fieldset and use this code:
function scrollForMe(top){
$("html,body").animate({
scrollTop: top.offset().top
}, 1000, "easeOutExpo");
}
Use it like so:
$(".link").click(function(){
scrollForMe($("#fieldesetname1"));
return false;
});