Develop Reference

Using a variable to set a ScrollTop with animate function

I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>

You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.

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.

How to make scrolling to target smooth

I have set up an comment button that is link to comment section of the page, it's like this
Comments
Demo on this page http://stramaxon.blogspot.com/2012/04/how-to-remove-shadows-from-pictures-in.html#disqus_thread
When you click it, you will be taken to the comments section, now i want the scrolling to be smooth, i know it is possible but can't find the key to achieve it. I am sure intelligent web designers in Stackoverflow will help me out.
I want it to be like this, check this page http://www.labnol.org/internet/bing-background-for-google-homepage/21303/
Scroll down and you will see a back to top button, it's so smooth i love it and want something like that.

$("#topBtn").click(scrollToTop);
function scrollToTop()
{
$('html, body').animate({scrollTop:0}, 1000);
}
should work
EDIT: that's for a non href, when you wanna use it on a href you should to it like this
function scrollToTop()
{
$('html, body').animate({scrollTop:0}, 1000);
return false;
}

making hover over text toggle with jQuery

I'm trying to make some text I have as an attribute of an element toggle up when the cursor is hovering. Currently, I'm seeing weird things happening with this code, but feel like I'm very close...any ideas?
$(".hoverDes").mousemove(function(){
$(".hoverDes").toggle(function(e){
var hoverIt = $(this).attr("hoverDesDiv");
$("#hoverDiv").text(hoverIt).show();
$("#hoverDiv").css("top", e.clientY-30).css("left", e.clientX-50);
}).mouseout(function(){
$("#hoverDiv").hide();
})
});

Your question is not clear enough to me but from your code above I guess you need this
$(".hoverDes").hover(function(e){
var hoverIt = $(this).attr("hoverDesDiv");
$("#hoverDiv").text(hoverIt).show('slow');
},
function(e){
$("#hoverDiv").hide('slow');
});

something like this?
hoverIt.show('slide', {direction: 'right'}, 500);