How can I add #anchors to the Url while Scrolling over projects?

1

I have a one-pager with many projects and I want to be able to share URLs with anchors, so they link to the position of a project on the page.

(www.likethis.com#project-1)
(www.likethis.com#project-2)
(www.likethis.com#project-3)

Therefore I am looking for something which is adding and switching anchors in the Url, based to the scroll position / which project is currently in the viewport…

Does anybody know how to do this with kirby? :slight_smile:

2

That’s a thing you’ll have to do with JavaScript. I don’t have a ready solution at hand, but a search for “scrollspy” and/or “set anchor in url” might give you some hints.

1 Like
3

I have used fullPage.js for this in the past

You could probably do it with Waypoints Waypoints

edit: yes you can it seems :slight_smile:

$('section').waypoint(function() {
    var hash = this.element.id

    window.location.hash = (hash);
    currentHash = hash;
});
1 Like
4

Thanks! :slight_smile: