Geek Answers Handbook

Change URL when scrolling

I use jQuery to change the hash of the URL when I click on the navigation button. But when I scroll with the mouse wheel, the URL will not change. How can i do this? How to do it using

window.history.pushState("object or string", "Title", "/new-url");

I can’t understand it. Please help my javascript code

 $j(document).ready(function () { $j("#start1").click(function (e) { e.preventDefault(); var section = this.href, sectionClean = section.substring(section.indexOf("#")); $j("html, body").animate({ scrollTop: $j(sectionClean).offset().top }, 1000, function () { window.location.hash = sectionClean; }); }); }); $j(document).ready(function () { $j("#start2").click(function (e) { e.preventDefault(); var section = this.href, sectionClean = section.substring(section.indexOf("#")); $j("html, body").animate({ scrollTop: $j(sectionClean).offset().top }, 1000, function () { window.location.hash = sectionClean; }); }); });

and html code

 <a href="#home" id="start1"style="text-decoration:none;position:absolute;right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)"><span >HOME</span></a> <span><a href="#products" id="start2" style="text-decoration:none;position:absolute;right:250px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">PRODUCTS & SERVICES</a></span>
+7
javascript jquery html5 try-catch
source share
2 answers

Here is some code that can help you - it listens for the scroll event and checks to see if there are any anchor elements in the viewport. If they are, the URL hash is updated using window.history.pushState .

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <style> body { height: 2000px; } a > div { min-height: 500px; } </style> </head> <body> <a href="#anchor1" id="anchor1" class="anchor"><div>ANCHOR 1</div></a> <a href="#anchor2" id="anchor2" class="anchor"><div>ANCHOR 2</div></a> <a href="#anchor3" id="anchor3" class="anchor"><div>ANCHOR 3</div></a> <a href="#anchor4" id="anchor4" class="anchor"><div>ANCHOR 4</div></a> <a href="#anchor5" id="anchor5" class="anchor"><div>ANCHOR 5</div></a> <a href="#anchor6" id="anchor6" class="anchor"><div>ANCHOR 6</div></a> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script> // stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport function isElementInViewport (el) { //special bonus for those using jQuery if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); } // click-to-scroll behavior $(".anchor").click(function (e) { e.preventDefault(); var section = this.href; var sectionClean = section.substring(section.indexOf("#")); $("html, body").animate({ scrollTop: $(sectionClean).offset().top }, 1000, function () { window.location.hash = sectionClean; }); }); // listen for the scroll event $(document).on("scroll", function() { console.log("onscroll event fired..."); // check if the anchor elements are visible $(".anchor").each(function (idx, el) { if ( isElementInViewport(el) ) { // update the URL hash if (window.history.pushState) { var urlHash = "#" + $(el).attr("id"); window.history.pushState(null, null, urlHash); } } }); }); </script> </body> </html>
+2
source share

You can use waypoint.js. http://imakewebthings.com/waypoints/guides/getting-started/

Here is an example code from the page, enter a new hash when you reach the waypoint.

 var waypoint = new Waypoint({ element: document.getElementById('element-waypoint'), handler: function(direction) { notify(this.element.id + ' triggers at ' + this.triggerPoint) }, offset: '75%' })
+1
source share

More articles:


All Articles