I have implemented a plugin for horizontal scrolling on my website. You can check out the plugin here.
Here is the demo link showcasing the plugin in action:
However, I am encountering an issue where the pages do not scroll when the link to scroll is placed within multiple divs. For example:
<div>
<div>
<hr />
<a href="#top">← Back to start</a> <a href="#" rel="next">Next section →</a>
</div>
</div>
The plugin utilizes the following script:
<script>
(function($) {
$(window).load(function() {
/* Page Scroll to id fn call */
$("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
layout: "horizontal",
highlightSelector: "#navigation-menu a"
});
/* demo functions */
$("a[rel='next']").click(function(e) {
e.preventDefault();
var to = $(this).parent().parent("section").next().attr("id");
$.mPageScroll2id("scrollTo", to);
});
});
})(jQuery);
</script>
If anyone has advice or solutions to help me resolve this problem, I would greatly appreciate it. Thank you.