Develop Reference

Page transition delay after link is clicked (after animation end)

I searched for similar problems but none of the solutions didn't help me.
So, here is my problem, i have in my header a few link for other pages (about, porftiolio etc...) and i have one animation in javascript when <a> element is clicked. But my page transition is instantly so that animation can't be seen. So what should i do to maybe stop page transition for a few second till my animation's end. Here is an example: http://codepen.io/anon/pen/zrXrXM . Can somebody help me what should i do to stop transition until my animation ends.

preventDefault to stop the re-direct, then change the window.location on the animation complete.
$("a").click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$(".header").slideUp("slow", function(){
window.location = href;
});
});
Updated CodePen

You can use the setTimeout() function
look here: http://codepen.io/SitePoint/pen/Ejxvjr
Explain here:http://www.sitepoint.com/jquery-settimeout-function-examples/

onclick Search - jump to search results section

I would like to change the functionality of WP Casa theme Paraiba. http://wpcasa.com/demo/paraiba/
Right now the search results are displayed under the page fold - my aim is to scroll down on them after the search button is clicked.
Would you advise me how to accomplish that?
Thanks.

Try this :
$(document).on('click','.listing-search-submit', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#main-wrap").offset().top
}, 2000);
});
NOTE : This answer depends on the link given by you.So if you have made changes to class or ID then above code won't run.

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;
});

How I can I make jQuery go directly to <h2 id="id-name">?

I want to make jQuery navigates directly (no animation need) to a id that I pass in a variable.
I have various marks like id="content", id="edit", id="..." that are <h2> titles. Doing validation with PHP I will output a variable like var NAVIGATE_TO = <?php echo $where_failed;?> and I want to move the website to that id position.
Like if I do domain.tld/page#edit or #content but with jQuery because when I load the page my PHP framework doesn't allow me to indicate the hash.

You can set location.hash to the id you need the browser to scroll to:
window.location.hash = '#edit';

In my experience the window.location.hash solution only works once. If you don't want to use the plugin you could try this:
var navigationFn = {
goToSection: function(id) {
$('html, body').animate({
scrollTop: $(id).offset().top
}, 0);
}
}
and then call it like so (where someID is the ID of the element you wish to scroll to):
navigationFn.goToSection('#someID');
With this you can also vary the animation speed (I have it at 0) so that it is instant, but you could pass the value to the function so the code is reusable.

Use the jquery scrollto plugin
then you can do it like this
$(document).ready(function(){
$(".topMenu").click(function() {
$.scrollTo($("#edit"), { duration: 0});
});

I know it's an old question, but I thought it would be also a good solution if just want the element to be visible in the browsers view. (scroll without any animation).
var elem = document.getElementById("yourContent");
elem.scrollIntoView();
The above sample is taken from https://www.w3schools.com/jsref/met_element_scrollintoview.asp

the question is for "jQuery"
with jQuery
#Patrick 's answer will be right and here is the example without function:
$('html, body').animate({scrollTop: $("#id").offset().top}, 0);
with javascript:
#Yi Jiang 's answer is javascript based
window.location.hash = '#idWithOrWithoutHashSign';
#Yusufbek answer works.
but why create variable?
instead:
document.getElementById("idWithoutHashSign").scrollIntoView();
also check difference with "smooth";
document.getElementById("idWithoutHashSign").scrollIntoView({behavior: "smooth"});