We Keep Coding

jQuery scrollTop goes to the target then rolls up

I am using jQuery function scrollTop so when an element with a certain class is clicked your location changes. Here's what I have done:
$(document).ready(function (){
$(".paginacion").click(function() {
$(document).scrollTop( $("#galeria").offset().top );
});
});
I am navigating though a pagination menu which is in the middle of the page and I want to go back to that menu when I use the utility (clicking any element with the pagination class).
When I click any of those elements the page scrolls down for an instant but then scrolls back up.
What's wrong?

The <a> tag has a default href anchoring, which jumps to the target id and changes the URL hash/fragment. Just like #Khanh TO's example on the comment.
But if you are really wanting to handle this with jQuery. A good solution would be to first use preventDefault() which cancels the default execution on click event. Then switch to 'window' instead of 'document' when setting scrollTop. Both are going to have the same effect but $(window).scrollTop(value) is supported by all browsers.
$(".paginacion").click(function(e) {
e.preventDefault();
$(window).scrollTop( $("#galeria").offset().top );
});
If you are also looking to animate the scrolling, you just need to replace $(window).scrollTop() with:
$('html, body').animate({scrollTop: $("#galeria").offset().top});
FireFox and IE places the overflow at the html level so in order for animate(scrollTop) to work cross-browsers we need to include 'html'.
See this jsfiddle.

Why does jQuery make my page jump back to the top after click?

I have a general question about jQuery.
I have created few jQuery buttons but the problem that I have is when you scroll half way down the page and you press the button, the page jumps back to top, instead of staying in the middle where the button is??
How can you stop this from happening, as it's frustrating for the user??
Is there any particular reason why it's happening?
jsFiddle Example:
$(".comment-here").click(function() {
$(".comment-form").slideToggle('slow');
});
$(".main-btn.orange").click(function(){
$(".comment-form").slideUp('slow');
});

You're not preventing the default event. Since you're clicking on an anchor tag, the default event for # is just to jump up to the top of the document.
To prevent this from occurring:
Pass the event into the function, and use preventDefault();
$(".comment-here").click(function(e){
e.preventDefault();
$(".comment-form").slideToggle('slow');
})
$(".main-btn.orange").click(function(e){
e.preventDefault();
$(".comment-form").slideUp('slow');
})
You could also use return false; instead, which goes a bit further than just preventing the default event, it will stop events bubbling up to parent elements.

Add return false; to the click handler of the <a class="comment-here">.
Essentially it is not jQuery, but the default browser behaviour that causes this: you clicked a link, it has to navigate to its href, which is... "#", i.e. this page. So there we go back to this page (the top).

Prevent default behaviour of anchor tags:
$(".comment-here").click(function(e){
e.preventDefault();
//....
});

The problem is with your <a> tag using href="#" which references the current page and pulls you to the top.
I'd recommend the following approaches, instead of the default event prevention mentioned in other answers. Of course those work, but why use an element only to remove it's default functions?
Ergo, use something that is intended for your purpose:
1.) Use a <button> instead of <a>:
http://jsfiddle.net/RvHjx/7/
2.) If you're dead set on using <a>, remove the href attribute in your <a> tag. This will remove the blue-underlined link styling (the link still functions correctly though), but it's easy to fix with some CSS:
http://jsfiddle.net/RvHjx/11/

Adding javascript:; to your a tags href is the simplest way.
my link

Prevent HTML contents from being interacted with

I have a site menu which sits underneath an overlying and is revealed by clicking on a button on the overlying , which slides it aside.
What I want to do is, while the site menu is open, prevent the overlying (everything but the menu button, ideally) from being interacted with.
I can do this by hiding and showing a container that sits over top of all the overlying content, but I was wondering if there's a way to just set some sort of property with CSS (best option) or javascript to disable click / touch events on the overlying . Any ideas?

You could use a JQuery modal overlay to prohibit the user from using anything else but whatever is in the modal div.
http://jqueryui.com/demos/dialog/#modal

When the menu is open, add this attribute to whatever controls you would like to disable
onclick="return false;"
Then remove the attribute when the menu is closed. This will prevent the default action from occuring.
You can do this without adding an attribute by using this code:
document.getElementById("myElement").onclick = function() { return false; }

CSS is about the look, not the behavior. So you can't enable or disable elements by applying CSS to them.
Your solution with an overlay is quite capable, i would do it this way too. Note that your overlay can be transparent or semi-transparent.
It is possible to be solved by overriding the click event with Javascript, but why bother creating a complicated solution (you'll have to redefine the onclick event on every element and then somehow set it back to normal) if you've already got a short clean solution?
As mbsurfer has already suggested, a quick way of disabling everything except your menu is to use the jQuery UI's .dialog with the modal option:
$(function() {
$( "#menu" ).dialog({
modal: true
});
});
More info in the docs: http://api.jqueryui.com/dialog/

onclick event on div not firing

I have an image+text slider with recent blogposts which loop through the recent posts whilst a vistor keeps looking at a certain page.
You can see all the code on http://jsfiddle.net/GsgPM/16/
It is about the big image + text slider where it doesn't fire.
THe event does fire on the pink button.
Does not compute for me really... why does it work for the one, and not for the other?
Now I want to redirect people to the right blogpost with an onclick event on the containing div(slider) with the black borders.
The only puzzling thing is, the click event doesn't fire, nor does the cursor get changed to the right image(a hand) as defined in the css stylesheed, but the 1px border does get added.
On a test div, in my code on http://jsfiddle.net/GsgPM/16/ below my trouble code it does fire.
On another page of my blog I have no issues at a ll with the click event.
when I view the code changes in google chrome inspect elements window the click event does get transported on the div changes.
JSLint shows no errors, my console doesn't show any errors either. The entire event simply doesn't fire.
Who knows what the underlying cause is for this problem?

The problem is the shadow div. When you click on your slider, the click is registered on the div with id="shadow". Try to remove that div, and then it works. If you need that div, you have to make sure it is below the slider divs.

In your code you have
onclick="window.alert('Hello Raxacoricofallapatorius'
your missing a ); so it would be
onclick="window.alert('Hello Raxacoricofallapatorius');
A more Jquery way to react to click on img is to use on
$('#smallphotos div').on('click','img',function() {
alert('here');
});
to further this you could store the target on a data attribute like
<img src="http://www.freedigitalphotos.net/images/gal_images/av-_50.jpg" title="test2" data-target="www.google.com" />
which could then redirect your page like so.
$('#smallphotobox').on('click','#smallphotos div',function() {
window.location.href=$(this).data('target');
});
Also #slider is in the way you will notice i removed it and everything works.. try setting its z index to be behind the rest.
NOTE this wont work on jsfiddle due to restrictions.
fiddle

jquery problem:on click function is not showing the h3 title?

i have this jquery script that clicks on link add info then hides it and brings up a form. and when you press cancel it needs to show the h3 again, but it deosnt show it, i dont know why:
heres my working code: http://jsfiddle.net/GLqcx/2/

$("h3").show();
should be
$("h3 a").show();

In your .addInfo click handler, you are hiding the <a> with this line:
$(this).hide();
However, in your .cancelInfo click handler, you are showing the <h3>:
$("h3").show();
You'll need to change one or the other, so that you are hiding/showing either the <h3> or the <a>.
I've taken the liberty of fixing your problem and optimizing your code a bit. Here's what I came up with:
$(".cancelInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().next().show();
});
$(".addInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().prev().show();
});
Here's a demo showing that code in action ->
Instead of using broad selectors, we are now using our knowledge of the document structure to traverse to and manipulate the correct elements. In addition, we are only doing one selection, thus saving some time and work.

Or alternatively,
$("h3").hide();
instead of $(this).hide()
As you are hiding the a link not the h3 in your code. So when you tried to show the h3, the a link was still hidden.