Streaming live at 10am (PST)

Scrollify Pagination


#1

Trying the past hour on how to implement example https://projects.lukehaas.me/scrollify/examples/pagination/#home and I can’t get it to work.

Here is my site with the working scrollify plug in, but I’m trying to add the anchor links that jumps to the sections but it’s not working.

If getting this to work my next task is wanting to copy how this pagination interaction works.

The JS code I tried to get the pagination working:

   $(function() {
   $.scrollify({
	section:".panel",
    scrollbars:false,
   before:function(i,panels) {

  var ref = panels[i].attr("data-section-name");

  $(".pagination .active").removeClass("active");

  $(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
},
afterRender:function() {
  var pagination = "<ul class=\"pagination\">";
  var activeClass = "";
  $(".panel").each(function(i) {
    activeClass = "";
    if(i===0) {
      activeClass = "active";
    }
    pagination += "<li><a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "</span></a></li>";
  });

  pagination += "</ul>";

  $(".home").append(pagination);
  /*

  Tip: The two click events below are the same:

  $(".pagination a").on("click",function() {
    $.scrollify.move($(this).attr("href"));
  });

  */
  $(".pagination a").on("click",$.scrollify.move);
}
  });
  });

Here is my public share link: LINK