We Keep Coding

jQuery each function not working for scroll top animation

I try to use the jQuery each function for scroll top animation in pagination each click but each function not working well it's working the first time only. Here are the code
$(".wp-pagenavi > a").each(function(i){
$(this).click(function(){
var scroll = $("html, body");
scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { });
console.log("click" + i);
});
});
Please help me to reach out form this issue.

It is quite possible some of the target are loaded after DOM ready event in which case you would have to change your code to:
$(document).on('click', '.wp-pagenavi > a', function() {
var scroll = $("html, body");
scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { });
console.log("click");
});

Have a look at the following simplified fiddle: https://jsfiddle.net/f46dnaue/3/
Is this the behaviour you are experiencing?
In the fiddle, i represents the index of the element being clicked. Clicking either element results in console output on every click.
Regarding your scrolling, should it always scroll to 400? If scroll is defined as 400, it is going to stay 400 no matter the number of clicks - so if you want your page to scroll by 400px steps you need to save the current scrollTop value and add an extra 400 to it for every click.

Smooth scroll script blocking links

I am using the following script to smooth scroll to anchor points on my web page. The problem I am having is that I have a couple href links to different pages but this seems to be blocking them from opening. Can only open them by right clicking 'open new tab'.
Any help much appreciated. Thanks.
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});

Managed to fix this by removing event.preventDefault()

jQuery not triggering event in hover state

I'm currently trying to make a navigational menu that on click scrolls to a div positioned lower on the page. Initially it worked but as I added a CSS transition to highlight the text, the jQuery will no longer trigger the scrolling to happen upon clicking it.
$("#about, #about:hover").click(function() {
$('html,body').animate({
scrollTop: $("#box1").offset().top},
'slow');
});
The #about id is a part of the nav menu and will scroll to #box1 on click. I've tried adding the hover state to the selector, changing it to .trigger rather than .click but I'm not seeing a simple solution. I've recreated the event in Chrome, Safari, and using JSFiddle.
Is the JQuery conflicting with the transition, the hover state, or my code in general?
EDIT: It is working in the Fiddle example but the event still isn't happening when produced locally (everything is linked and correct with no errors in console).

Your JS code runs before the DOM is fully loaded.
Put the JS inside document.ready();:
$(document).ready(function () {
$("#about, #about:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box1").offset().top
},
'slow');
});
$("#portfolio, #portfolio:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box2").offset().top
},
'slow');
});
$("#social, #social:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box3").offset().top
},
'slow');
});
$("#contact, #contact:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box4").offset().top
},
'slow');
});
});
See updated JSFiddle

It doesn't work if your jQuery link and/or functions link are in the header.
It works for me if the js links are towards the end of your html like before the closing body tag.

JavaScript inside the A HREF keeps jQuery function from working

I'm using a WordPress plugin to display a list of locations and a map of those locations.
I created the following function so that a link will scroll to a map when a link is clicked.
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function() {
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
However, the plugin automatically adds the following to each link:
href="javascript:open_current_location(marker2259map2)">
This link causes the map-marker to open, however, it appears to be preventing the jQuery function from scrolling the page to the top of the page.
Any ideas how to overcome this?

You need to cancel the default event inside your click handler:
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
Fiddle

An approach could be to override the open_current_location() function.
Take a look at this example, you could also execute the scrolling and then the original behaviour of open_current_location()

How can I prevent the page from scrolling down when using jQuery UI hide("slide")?

here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian

I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });