jQuery smooth scrolling when clicking an anchor link

[randomcat]

Έχω ένα μενού με διάφορα internal links που οδηγούν σε τμήματα της ίδιας σελίδας όπως στο HTML παράδειγμα, και χρησιμοποιώ λίγη JavaScript (jQuery) για smooth κύλιση σε αυτά.

HTML:

<a href="index.php#about">About</a>

.

.

.

<a id="about"></a>

jQuery:

var $root = $('html, body'); // Caching the selector.



$('a[href*="#"]:not([href="#"])').on('click', function(event){



    event.preventDefault(); // Prevent the "normal" behaviour which would be a "hard" jump.



    var target = this.hash;

    var $target = $(target);



    $root.stop().animate({

        scrollTop: $target.offset().top-62

    }, 900, 'swing', function () {

        window.location.hash = target;

    });

});

Θέλω να διατηρήσω τη διέυθυνση του συνδέσμου δηλ. να φαίνεται το "index.php#about" ή "#about" στην address bar...

 

... όμως η γραμμή "window.location.hash = target;" μου ακυρώνει το vertical offset "top - 62".

 

Καμιά ιδέα?

 

[M2000]

Φίλε δεν ξέρω αν σου κάνει αλλά έχω χρησιμοποιήσει αυτό (που έχω γράψει)

// Support js
var curid="";
var oldid="";
function gobackid() {
goid(oldid);
}
function goid(id){
 oldid=curid;
 curid=id;
 $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');    
}

Εδώ φαίνονται τρεις "σκόρπιες" γραμμές.

  <li id="mystart" ><a href="#" onclick="goid('')">▲ Αρχή</a></li>  


 <li><a href="#" onclick="goid('facil')">Εγκαταστάσεις</a></li>
      <li id="myback" ><a href="#" onclick="gobackid()">↶ Πίσω</a></li> 

Αν κατάλαβες..τότε ΟΚ......

 

(δεν νομίζω ότι θα φαίνεται το #ααα )

 

 

 Εδώ είναι η σελίδα που έχω φτιάξει (τέσσερις μέρες μου πήρε...πρώτη φορά χρησιμοποίησα jquery...και javascript)...

http://www.zahouschool.com/

[defacer]

Αντί για window.location.hash = whatever απλά κάνε

window.history.pushState(null, null, this.hash);

Γενικά τώρα το όλο script είναι ελαφρώς κουλουβάχατα αλλά ΟΚ δουλεύει και είναι από copy paste οπότε OK.

[randomcat]

@M2000 σ' ευχαριστώ, είδα πως λειτουργεί στο σάιτ που έφτιαξες - θα το δοκιμάσω - αλλά δεν νομίζω ότι θα παραμείνει το location... και θα προτιμούσα να μην βάλω JavaScript στην HTML (μόνο σε external script δηλαδή).

 

 

Αντί για window.location.hash = whatever απλά κάνε

window.history.pushState(null, null, this.hash);

Γενικά τώρα το όλο script είναι ελαφρώς κουλουβάχατα αλλά ΟΚ δουλεύει και είναι από copy paste οπότε OK.

 

Το δοκίμασα και δεν κάνει κάτι. Η διεύθυνση παραμένει κενή χωρίς το fragment.

[defacer]

Αν ανοίξεις την κονσόλα του browser όπως είσαι σ' αυτήν εδώ τη σελίδα και δώσεις 

window.history.pushState(null, null, "#whatever");

θα δεις ότι δουλεύει κανονικά.

 

Επομένως το ότι δε δουλεύει εκεί σημαίνει πως κάπως κάτι γίνεται έτσι που έχεις τον κώδικα και δε λειτουργεί σωστά η όλη φάση. Δυστυχώς ούτε εγώ ούτε νομίζω κανένας άλλος μπορεί να σε βοηθήσει σ' αυτό με σπασμένο τηλέφωνο debugging. Φτιάξε ένα μικρό jsfiddle ή τουλάχιστον πόσταρε ξανά με ολόκληρο τον κώδικα που δε σου δουλεύει ακριβώς όπως τον έχεις.

[M2000]

Και εγώ σε εξωτερικό το έχω...Το βρήκες; Μέσα εκεί έχω και μια άλλη πατέντα. Δηλαδή δες τι σκέφτηκα. Ήθελα να δείξω μερικές φωτογραφίες αλλά αφενός δεν ήθελα να τις φορτώνει άμεσα, αλλά μόνο όταν το επιλέξει ο χρήστης (χωρίς να φύγει από τη σελίδα, μέσω ενός Popup), και αφετέρου ήθελα να προσθέτω εικόνες χωρίς να πειράξω τη σελίδα! Ο τρόπος ήταν να χρησιμοποιήσω ένα αρχείο. Μάλιστα δεν ήθελα μόνο να παίρνει το όνομα του αρχείου που θα φορτώνει αλλά και μια ετικέτα...Έτσι κατάφερα να φτιάξω δυο κουμπιά και να δείχνω μια σειρά φωτογραφιών με ετικέτα χωρίς να χρησιμοποιώ βάση δεδομένων απλά ένα αρχείο κειμένου!

(θα δεις την πατέντα να λειτουργεί..στις εγκαταστάσεις)

 

Οπότε αν πας στις τελευταίες γραμμές θα βρεις αυτό εδώ:

 <script src="b/js/g.js"></script>  

Δηλαδή και εγώ σε script το έχω! Κάτι έκανα θυμάμαι για να μην παραμένει το site...(αν δεις τα href δείχνουν το #, και αυτό μένει! και μετά κάνει το On click.)

[randomcat]

@M2000 εννοούσα ότι θα ήθελα να αποφύγω ακόμα και τις κλήσεις με "onclick" μέσα στην HTML Έφτιαξα ένα jsfiddle... εάν δεν βγάλω τελικά άκρη θα τεστάρω έπειτα και τη δική σου λύση!
 
@defacer ένα παράδειγμα με jsfiddle: https://jsfiddle.net/0ujvahyb/2/
 
Και παρακάτω όλος ο κώδικας. Δοκίμασα λοιπόν την πρότασή σου σε ένα απλό παράδειγμα και δεν δούλεψε. :/
 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Scroll Effect Test</title>

<style>
p
{
	margin: 400px auto;
	background-color: #D4D4D4;
}
</style>

</head>
<body>

<ul style="margin-bottom: 100px;">
<li><a href="#about1">Link One</a></li>
<li><a href="#about2">Link Two</a></li>
<li><a href="#about3">Link Three</a></li>
<li><a href="#about4">Link Four</a></li>
<li><a href="#about5">Link Five</a></li>
</ul>

<p>
<a id="about1"></a>
#1
 Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
  Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
   Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
    Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
</p>

<p>
<a id="about2"></a>
#2
 Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
  Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
   Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
    Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
</p>

<p>
<a id="about3"></a>
#3
 Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
  Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
   Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
    Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
</p>

<p>
<a id="about4"></a>
#4
 Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
  Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
   Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
    Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
</p>

<p>
<a id="about5"></a>
#5
 Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
  Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
   Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
    Lorem ipsum dolor sit amet, proin eius dictum nunc quis, sodales dolor, rutrum ullamcorper mauris arcu sit mattis, sem per arcu habitasse luctus, laoreet parturient in ante auctor condimentum dui. Faucibus semper tincidunt tellus enim purus eu, aptent magna at ante molestie sit vivamus, orci lectus sed. Donec convallis sit ac. Lacus accumsan, aliquam tristique ligula dolor felis. Vitae pede vitae ultrices nonummy auctor, sed neque elit pharetra, duis mauris sapien, tellus arcu. Lectus maecenas. Nunc nulla erat vulputate sed, tincidunt sapien vehicula mattis vel. Bibendum elit ac turpis, commodo tellus molestie maecenas, nec consectetuer, laoreet lectus habitant elit consequat. Litora aliquam justo laoreet vestibulum sodales, volutpat risus adipiscing sollicitudin duis penatibus sollicitudin, rutrum tincidunt dolor nunc id ipsum ultricies, suspendisse venenatis proin sed at libero convallis.
</p>

<!-- OPEN JS SCRIPTS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function ()
{

    var $root = $('html, body'); // Caching the selector, so that it doesn't run every single time an anchor is clicked.

    $('a[href*="#"]:not([href="#"])').on('click', function (event) {
        event.preventDefault(); // Prevent the "normal" behaviour which would be a "hard" jump.

        var target = this.hash;
        var $target = $(target);

        $root.stop().animate({
            scrollTop: $target.offset().top - 62
        }, 900, 'swing', function () {
			//window.location.hash = target;
            //window.location.hash = target.substr(1);
            window.history.pushState(null, null, this.hash);
        });
    });
});
</script>
<!-- CLOSE JS SCRIPTS -->

</body>
</html>

[defacer]

Έχεις λάθος (surprising, I know). Μέσα στο callback που περνάς στην animate χάνεις τη σωστή τιμή του this. Ο ευκολότερος τρόπος να το φτιάξεις αυτό είναι αντί για this.hash να το αντικαταστήσεις με target μιας που το έχεις ήδη έτοιμο. Αυτό θα είναι αρκετό για να δουλέψει.

 

Επιπλέον δεν ξέρω γιατί έχεις $root = $('html, body'), φαίνεται τελείως άκυρο. Σκέτο $('body') ή για πιο μερακλήδες $(document.body) είναι σωστότερο και δουλεύει μια χαρά.

[randomcat]

Έχεις λάθος (surprising, I know). Μέσα στο callback που περνάς στην animate χάνεις τη σωστή τιμή του this. Ο ευκολότερος τρόπος να το φτιάξεις αυτό είναι αντί για this.hash να το αντικαταστήσεις με target μιας που το έχεις ήδη έτοιμο. Αυτό θα είναι αρκετό για να δουλέψει.

 

Αν λες για το

window.history.pushState(null, null, this.hash);

εσύ μου το είχες πει

 

 

Όσο για το target δημιουργεί το πρόβλημα που έλεγα στο πρώτο post. Μου ακυρώνει το vertical offset "top - 62" ...

[M2000]

Δοκίμασε με το τρόπο που σου έδειξα. Μάλιστα αν πρόσεξες έχω ένα μενού πάνω, που παραμένει παρά το scrolling και υπάρχει κουμπί πίσω, το οποίο όμως εναλλάσει τους δύο τελευταίους σελιδοδείκτες. Επίσης έχω μενού που σε πηγαίνει πάλι ομαλά στο σημείο που πρέπει και το καταγράφει. Η σελίδα που σου έδειξα, δείχνει και το εργαστήριο μου υπολογιστών, παίζει ωραία και σε μικρές συσκευές, όπου εκεί το μενού αλλάζει. Δες το και σε desktop αν κάνεις το Chrome ή ότι άλλο στο μέγεθος/σχήμα κινητού.

[randomcat]

@M2000 το δοκίμασα και δουλεύει (και το animation και το σωστό offset και το location), οπότε έχω κάτι που δουλεύει όπως πρέπει - σ' ευχαριστώ.

 

Θα ήθελα όμως να διορθώσω και το δικό μου, για να έχω μια πιο καθαρή λύση δίχως onclick και κλήσεις JavaScript μέσα στην HTML :/

[M2000]

 

Χαίρομαι που βρήκες μια λύση! Πάντως η εμμονή στη καθαρή λύση είναι χρονοβόρα, και κοστοβόρα (και εγώ κάνω κάτι τέτοια...είναι η τρέλα που λέμε).

[flienky]

Η window.location.hash ειναι deprecated στην HTML 5 και καλύτερος τρόπος είναι το window.history.pushState(null, null,hash);.

 

Τώρα στο κώδικά στου το

 window.history.pushState(null, null,this.hash);

θα πρέπει να αντικατασταθεί με το

window.history.pushState(null, null, target);

όπως είπε και ο defacer.

Το this.hash δεν δουλεύει καθώς το this μέσα στην pushState() αναφέρεται στο body!

Διορθώστεμε αν δεν κάνω λάθος.

Πάντως με αυτην την αλλαγή ο κώδικας δουλεύει μια χαρά.

Επεξ/σία 26 Ιανουαρίου 2016 από flienky

[randomcat]

@M2000 Το ψιλοέφτιαξα τελικά βάζοντας

window.history.pushState(null, null, target);

@flienky με πρόλαβες για λίγα δευτερόλεπτα! Έχεις δίκιο, ωστόσο δες ένα προβληματάκι που έγραψα στο τέλος.

 

@defacer , @flienky οπότε το script έχει ως εξής:

$(document).ready(function ()
{
    /**
     * Scroll effect.
     */
    var $root = $('html, body'); // Caching the selector, so that it doesn't run every single time an anchor is clicked.

    $('a[href*="#"]:not([href="#"])').on('click', function (event) {
        event.preventDefault(); // Prevent the "normal" behaviour which would be a "hard" jump.

        var target = this.hash;
        var $target = $(target);

        $root.stop().animate({
            scrollTop: $target.offset().top - 62
        }, 900, 'swing', function () {
			window.history.pushState(null, null, target);
        });
    });
});

Το μόνο πρόβλημα τώρα είναι ότι πρέπει να πατήσω δύο φορές το back button (είτε του browser είτε το backspace) για να επιστέψω στο προηγούμενο location.

 

Καμιά ιδέα?

[defacer]

Το μόνο πρόβλημα τώρα είναι ότι πρέπει να πατήσω δύο φορές το back button (είτε του browser είτε το backspace) για να επιστέψω στο προηγούμενο location.

 

Καμιά ιδέα?

 

Στο είπα ήδη. Βγάλε το "html" από τη γραμμή που βάζεις το $root.

 

Επίσης δε θα ήταν και κακή ιδέα να κάτσεις λίγο να προσπαθήσεις να καταλάβεις τι ακριβώς κάνει αυτό που έχεις στα χέρια σου.