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

Jquery issue when two functions are used

Hey guys I am new to web design and making a site for the family business.
Both of these jquery functions work when the other isn't present in the code but when both are used the first (scroll to) fails to work.
Scroll to location function:
<script type="text/javascript">
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
</script>
Scroll to new page on user scroll function:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
css3: true
});
});
</script>
any advice would be appreciated thanks

You should call the first block of code inside of the $(document).ready(); call in the second block. Basically you're setting up an event listener (in this case, a button click) on an element (the button) that may not exist yet because the page is still loading. Setting up the listener inside of $(document).ready(); makes it wait until the page is loaded.
Your code should probably look like this:
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
$('#fullpage').fullpage({
sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
css3: true
});
});
</script>

Fade effect with .hide() .show() in JQuery

I found a nice method to split large post, on blogger, into multiple pages here: http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/
I'm trying to add a fade effect when switching pages, but i don't know how to do this, i have no experience when it comes to jquery...
I managed so far to make the page scroll back to the top, and added some animations using time values, but it's not looking quite right.
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').show(2000);
jQuery('.content2').hide(1000);
jQuery('.content3').hide(1000);
jQuery('.content4').hide(1000);
jQuery('.content5').hide(1000);
So basically what i want is the current "page" to fade out and the next "page" to fade in...

Use below code
below javascript will add effect fadeIn-fadeOut on page while switching the pages.
<script type="text/javascript">
$(document).ready(function() {
$("body").fadeIn(800);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(400, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Put above code into <head> tag in your Html page

Add this code
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').fadeIn(2000);
jQuery('.content2').fadeOut(1000);
jQuery('.content3').fadeOut(1000);
jQuery('.content4').fadeOut(1000);
jQuery('.content5').fadeOut(1000);

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>

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.