randomcat Δημοσ. 27 Ιανουαρίου 2016 Μέλος Δημοσ. 27 Ιανουαρίου 2016 Δε γίνεται να μη δουλεύει εκτός αν κάνεις κάτι άλλο λάθος. Δες και μόνος σου: https://jsfiddle.net/4mrbny8L/1/ Μάλλον χρησιμοποιείς Chrome, σωστά; Στον Firefox Developer Edition (επίσης σε Firefox και ΙΕ11) δεν μου δουλεύει. Και κατι αλλο. Γτ καλείς την stop() ετσι και οχι stop(false,true) ωστε αν υπαρχει animation να το ολοκληρωσει αμέσως Επειδή θέλω να ολοκληρωθεί. Αυτό που δεν θέλω είναι να ακολουθήσουν και άλλα animations εάν π.χ. κλικάρω πολλές φορές τον σύνδεσμο.
defacer Δημοσ. 27 Ιανουαρίου 2016 Δημοσ. 27 Ιανουαρίου 2016 Μάλλον χρησιμοποιείς Chrome, σωστά; Στον Firefox Developer Edition (επίσης σε Firefox και ΙΕ11) δεν μου δουλεύει. Ναι, chrome. Δεν είμαι σίγουρος γιατί δε δουλεύει σε FF και IE (είναι λίγο ridiculous ότι μπορείς να δώσεις τιμή στο document.body.scrollTop αλλά δεν έχει κανένα αποτέλεσμα), με λίγο ψάξιμο βλέπω ότι το θέμα έχει συζητηθεί τα μάλα, εκεί θα βρεις και hardcore σωστή λύση. Πάντως το "html, body" είναι καγκουριά γιατί είπαμε, άσχετα με το τι γίνεται με το scroll ο event handler που έχεις στο τέλος θα τρέξει δύο φορές. Με το συγκεκριμένο κώδικα που έχεις πάντως ένα workaround που θα μπορούσες να βάλεις είναι να κρατήσεις το html, body ως έχει και να κάνεις μια χακιά μέσα στο callback της animate για να τρέχει μόνο μια φορά, π.χ. function () { if (this !== $root[0]) return; window.history.pushState(null, null, target); }
randomcat Δημοσ. 27 Ιανουαρίου 2016 Μέλος Δημοσ. 27 Ιανουαρίου 2016 Δουλεύει μια χαρά σε Firefox, αλλά όχι σε Chrome. Λοιπόν, θα ασχοληθώ κάποια στιγμή και θα προσαρμόσω τον selector στα καπρίτσια του κάθε browser και θα ποστάρω εδώ τη λύση. Σ' ευχαριστώ για τη σελίδα στο StackOverflow - ήταν αρκετά διαφωτιστική.
defacer Δημοσ. 27 Ιανουαρίου 2016 Δημοσ. 27 Ιανουαρίου 2016 Εμένα γιατί μου δουλεύει; https://jsfiddle.net/82oshdas/
randomcat Δημοσ. 27 Ιανουαρίου 2016 Μέλος Δημοσ. 27 Ιανουαρίου 2016 Εμένα γιατί μου δουλεύει; https://jsfiddle.net/82oshdas/ Δεν μπορείς να δεις το URL στο jsfiddle. Στον Chrome δεν εμφανίζεται το fragment / target.
defacer Δημοσ. 27 Ιανουαρίου 2016 Δημοσ. 27 Ιανουαρίου 2016 Δεν μπορείς να δεις το URL στο jsfiddle. Στον Chrome δεν εμφανίζεται το fragment / target. Γι' αυτό έβαλα console.log(document.location.toString()) για να φαίνεται εύκολα. Μια χαρά το δείχνει.
randomcat Δημοσ. 27 Ιανουαρίου 2016 Μέλος Δημοσ. 27 Ιανουαρίου 2016 Γι' αυτό έβαλα console.log(document.location.toString()) για να φαίνεται εύκολα. Μια χαρά το δείχνει. Φτιάξε ένα .html αρχείο αν θες και τρέξε το με Chrome. To URL δεν αλλάζει. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Smooth 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 () { console.log(this, this !== $root[0]); if (this !== $root[0]) return; window.history.pushState(null, null, target); console.log(document.location.toString()); //window.location.hash = target; //window.location.hash = target.substr(1); //window.history.pushState(null, null, target); }); }); }); </script> <!-- CLOSE JS SCRIPTS --> </body> </html>
M2000 Δημοσ. 27 Ιανουαρίου 2016 Δημοσ. 27 Ιανουαρίου 2016 Στο δικό μου κώδικα δεν ήθελα να αλλάζει μένει μόνο το #. Το δοκίμασες;
randomcat Δημοσ. 27 Ιανουαρίου 2016 Μέλος Δημοσ. 27 Ιανουαρίου 2016 Στο δικό μου κώδικα δεν ήθελα να αλλάζει μένει μόνο το #. Το δοκίμασες; Το δικό σου δουλεύει μια χαρά σε όλους τους browsers, εκτός αν μου διαφεύγει κάτι. Το δοκίμασα και με #about δηλ. όχι μόνο με σκέτο #.
M2000 Δημοσ. 27 Ιανουαρίου 2016 Δημοσ. 27 Ιανουαρίου 2016 A! ok, απλά εγώ δεν ήθελα να φαίνεται (και εδώ ανάποδα σκέφτομαι; )
defacer Δημοσ. 27 Ιανουαρίου 2016 Δημοσ. 27 Ιανουαρίου 2016 Φτιάξε ένα .html αρχείο αν θες και τρέξε το με Chrome. To URL δεν αλλάζει. Έριξες μια ματιά στην κονσόλα ή να το πάρει το ποτάμι;
randomcat Δημοσ. 27 Ιανουαρίου 2016 Μέλος Δημοσ. 27 Ιανουαρίου 2016 Έριξες μια ματιά στην κονσόλα ή να το πάρει το ποτάμι; "Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'smooth-scroll-effect-test.html#about2' cannot be created in a document with origin 'null'." "Unfortunately, pushState only works on a web-server" "Make sure you are following the Same Origin Policy." Καλώς 2
Προτεινόμενες αναρτήσεις
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε
Πρέπει να είστε μέλος για να αφήσετε σχόλιο
Δημιουργία λογαριασμού
Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!
Δημιουργία νέου λογαριασμούΣύνδεση
Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα