We Keep Coding

Hide hash from URL when page jump

I have a link on my menu that targets to an anchor on another page.
<a href="http://www.mylink.com.br/mylink/#anchor">
And I want to hide the #anchor from URL.
I've tried another solution, look:
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/";
});
and then, I need to activate a script to scroll to the div after the page loads:
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#divtoscroll").offset().top }, 2500);
});
but I don't know how to attach that event to the previous. The way it is, everytime the page loads, it scrolls to the div.
Any help?
I did it!
I added "contato" on the final of the URL to differentiate it from the other links.
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/contato";
});
And used it to recognize the URL and activate the document ready function.
var url = "www.mysite.com/mysite/contato";
if (location.href==url) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 2500);
});
}
else {
}
Works perfectly! Thanks for the help.

As far as I am aware it is not possible to do this, as it is what tells the browser which section of the page to jump to.
You may be able to do this using the amount of pixels and javascript, but it would not work for all cases.
Example:
window.scrollBy(0, 500);
You could use jQuery to scroll to a specific element ID on a page, but this would require a trigger on that page, such as a click, or even page load. Example below uses click.
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2500);
});

HTML Anchor Points - Wrong Position

This problem has been driving me insane for the last couple of hours.
I have a one-page website design. The anchor links work perfectly fine on the page itself.
But I have a second page that will act as the Blog section.
When I try to use the anchors from here to link back to the sections on the index page, they do not position correctly.
Please see main page:
www.redcedarstudios.ca/themes/Haze/index.html
and then try to click the nav links back from the blog page:
http://www.redcedarstudios.ca/themes/Haze/post.html
The positioning is completely out of whack.
Any help or ideas is greatly appreciated.
Thanks
John

So I found a fix.
I added a $(window).load function that will read the hash tag from the url and scroll to onloading:
$(window).load(function() {
var hash = window.location.hash;
$(document).scrollTop( $(hash).offset().top );
});

If you can't get the above to work try this:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>
It will actually animate to the correct div if it didn't land on it how it should because of assets that needed to load. If you want to remove the animation, I couldn't get the above code to work by itself, but I used my example here combined with the above example:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$(document).scrollTop( $(hash).offset().top );
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>

How to combine two similar jQuery in header (scrollTo - smooth)

I managed to create scroll to effect on a testing web-page. At first I had
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#static').offset().top
}, 1500);
});
})(jQuery);
which smoothly went on every page open to that anchor "static". Because header is big on page. so beside index page every navigation link would scroll past header down to anchor. That works perfect. But then I decided to make some submenu items. and they can't work because I use
<script type="text/javascript">
$(document).ready(function(e){
var str= location.hash;
var n=str.replace("_temp","");
$('html,body').animate({scrollTop:$(n).offset().top}, 500);
});
for that. This script can scroll down to anchor named "#something" on different page even and still smoothly scroll down. I found both scripts searching on Stack Overflow.
Problem is that when I use both of these, only 1st one works. They are similar so that's the problem. Is there any way to make them both work. If there is anchor "static" use first, if not use second?

How about
$(document).ready(function(e){
var str= location.hash;
var n=str.replace("_temp","");
if(n != "static") {
$('html,body').animate({scrollTop:$(n).offset().top}, 500);
} else {
$('html, body').animate({ 'scrollTop': $('#static').offset().top}, 1500);
}
});

Jquery link and URL hash

I'm new at jQuery and don't really know what I'm doing. I need some help.
I'm creating a web app. It has a header and footer that I want to stay on every page, so I decided to use jQuery to load a page into the main content div so every time a link is clicked, the whole page isn't reloaded.
Here's what I'm using to accomplish this:
<script>
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#main_content").fadeOut('fast');
$("#main_content").load(this.href);
$('html, body').animate({ scrollTop: 0 }, 0);
$("#main_content").fadeIn('fast');
});
});
</script>
And each link:
<a class="ajax-link" id="add" href="add.php"><span class="glyphicon glyphicon-plus-sign" style="margin-top:4px;"></span><div>add</div></a>
This works great EXCEPT the page address. My app uses PHP, and I need to be able to PHP Header to a page like 'index.php#about' that will load the index.php page and display the about.php in the #main_content div.
I tried this:
<script type="text/javascript">
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click');
})
</script>
I can see where the link is selected (box around it), but it doesn't actually click it. I'm not sure why.
Thank you in advance for any help!

I think you could just get the hash, add a php extension and make an ajax call.
<script>
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
// Get the hash from the URL and append .php extension
// index.php#about ==> 'about.php'
var page = window.location.hash + ".php";
//Make an ajax call using the page variable.
$("#main_content").fadeOut('fast');
$("#main_content").load(page);
$('html, body').animate({ scrollTop: 0 }, 0);
$("#main_content").fadeIn('fast');
});
});
</script>

Tweak smooth scrolling code

I am trying to learn jQuery and I'm having a mental blank at the moment. The following code scrolls my page to the top with a smooth transition, but I would like this smooth transition to work for all anchor/ID links on my site (it's only a one pager).
$(document).ready(function() {
$('a[href="#the-top"]').click(function (e) {
$("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
return false;
});
});
How can I change my code to achieve this?

jQuery(function($) {
$('a[href^=#]').bind('click', function (evt) {
var $what = $('#' + $(this).attr('href').split('#')[1]);
$('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
evt.preventDefault();
});
});
Changes suggested in this code:
Change global $ object to jQuery
Just jQuery(fn) as document.ready(fn)
Closure: use jQuery as $ inside that function
Prevent default event from anchor instead of return false (source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
Use of $what asking for the #something part of anchor href, in order to prevent misbehaviors in IE (because if you have href="#some" sometimes it become href="http://yoursite.com/yourcurrentpage/#some instead)
All of these are kind of optional. You get the idea. Feel free to change.
DEMO AT: http://jsfiddle.net/Nm3cT/

Take a look at Chris Coyier's smooth Scrolling script. It does exactly that and needs no further configuration. Plus, it updates the address on the browser.