Scrollify - Move durch Anker - Seite lädt neu

**Nacht69** · 31.01.2018, 15:45

Guten Tag,

baue eine Seite mit Scrollify auf und bis jetzt hat alles wunderbar funktioniert.
Wenn ich nun aber eine Pagination hinzufügen will wie hier gezeigt:

https://projects.lukehaas.me/scrolli...es/pagination/

funktioniert das zwar ebenfalls und es scrollt zum richtigen platz, jedoch wird dann die seite neu geladen.

<a href="#anker">

wenn ich nun das {{env::request}} vor den anker schreibe funktioniert das Javascript nicht mehr. (laden tut er jedoch die Seite nicht mehr neu und der Hash verändert sich bei jedem klick der navigation)

Code:

      <script>
   $(function() {
  $.scrollify({
		section:".panel",
	 sectionName: "section-name",
    scrollbars:true,
    
 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=\" {{env::request}}#" + $(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>";

      $("#main").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);
    }

  });
});

      </script>

Würd mich mega über hilfe freuen, da ich schon seit Stunden rumprobiere, zwar ständig neue Lösungsansätze finde, jeder dieser aber wieder einen Nachteil tag.

**Webbaumeister** · 31.01.2018, 18:41

Zitat von Nacht69

Guten Tag,

funktioniert das zwar ebenfalls und es scrollt zum richtigen platz, jedoch wird dann die seite neu geladen.

Ich vermute das liegt ebenfalls daran, dass das Javascript nicht funktioniert.

Hast du einen Link wo man sich das anschauen könnte?
Werden irgendwelche Javascript-Fehler angezeigt?

**Net Cube** · 07.02.2018, 17:10

Ich mach das auch so: {{env::request}}#anker

Hier der Javascript Code:

Code:

<script type = "text/javascript" language = "javascript">
$('a[href*="#"]')
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top -110
        }, 1000, function() {
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { 
            return false;
          } else {
            $target.attr('tabindex','-1'); 
            $target.focus(); 
          };
        });
      }
    }
  });
      </script>

Hoffe es hilft