Menu
I am using jQuery to change the URL hash when I click on the navigation button. But when I scroll using the mouse wheel the URL won't change. How can I do that? How can it be done using
window.history.pushState(“object or string”, “Title”, “/new-url”);
I am not able to 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 is
<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>
929
asked Jun 09 '15 14:06
Here's some code that may help you - it listens for the scroll event, and checks to see if any of the anchor elements are in the viewport. If they are, the URL hash is updated with 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>
You can use waypoint.js. http://imakewebthings.com/waypoints/guides/getting-started/
Here is an example code from the page, throw a new hash when the waypoint is reached.
var waypoint = new Waypoint({ element: document.getElementById('element-waypoint'), handler: function(direction) { notify(this.element.id + ' triggers at ' + this.triggerPoint) }, offset: '75%' })
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With