Wie scrolle ich mit jquery/javascript nach unten zum Inhaltsfeld in diesem Videostil?

Question

Ich habe eine Seite mit Videostile - http://picovico.com/video-styles/ in meinem WordPress. Alles funktioniert gut, außer dass ich nach dem Klick auf die Vorschaubilder zum Inhalt blättern möchte. Im Moment öffnet sich die Inhaltsbox, aber das Fenster scrollt nicht herunter. Eigentlich benutze ich ein Plugin namens expand grid. Ich bekomme keine Unterstützung vom Autor des Plugins.

Ich verwende unten Code:

$(".cq-expandgrid-item").click(function() { 
    $('html, body').animate({ 
     scrollTop: $(".cq-expandgrid-content").offset().top 
    }, 5000); 
}); 

Dank.

@TTCC Hier ist die init.min.js in der Plugin-Datei vorhanden. Der Code ist unten angegeben. Mit Ihrer Hilfe, ich hoffe, ich kann den Code ausfindig machen, und fügen Sie jetzt vorgeschlagen:

jQuery(document).ready(function(a) { 
a(".cq-expandgrid").each(function(b, c) { 
    function r() { 
     o = setInterval(function() { 
      clearInterval(o), k++, k > m && (k = 0), a(".cq-expandgrid-toggle", p).eq(k).trigger("click"), r() 
     }, 1e3 * j) 
    } 
    var d = a(this), 
     e = a(this).data("itemsize"), 
     f = "yes" == a(this).data("transparentitem") ? !0 : !1, 
     g = a(this).data("labelfontsize"), 
     h = a(this).data("subfontsize"), 
     i = parseInt(a(this).data("itemheight"), 10), 
     j = parseInt(a(this).data("autoslide"), 10), 
     k = 0, 
     m = a(".cq-expandgrid-item", d).length, 
     n = "yes" == a(this).data("openfirst") ? !1 : !0, 
     o = 0, 
     p = a(".cq-expandgrid-item", d).each(function(b) { 
      a(this).data("index", b); 
      var c = a(this).data("image"), 
       d = a(this).data("avatar"), 
       f = a(this).data("backgroundcolor"), 
       j = a(this).data("iconcolor"), 
       k = a(this).data("iconsize"), 
       l = a(this).data("contentcolor"), 
       m = a(this).data("labelcolor"), 
       n = a(this).data("subtitlecolor"), 
       o = a(this).data("bgstyle"), 
       p = a(this).data("avatartype"), 
       q = a(this), 
       r = a(this).attr("title"); 
      if (r && "" !== r) var r = a(".cq-expandgrid-face", q).tooltipster({ 
       content: r, 
       position: "top", 
       delay: 200, 
       interactive: !0, 
       speed: 300, 
       touchDevices: !0, 
       animation: "grow", 
       theme: "tooltipster-shadow", 
       contentAsHTML: !0 
      }); 
      "" != l && a(".cq-expandgrid-text, .cq-expandgrid-text p, .cq-expandgrid-text h2, .cq-expandgrid-text h3, .cq-expandgrid-text h4, .cq-expandgrid-text h5, .cq-expandgrid-text h6", q).css("color", l), "" != m && a(".cq-expandgrid-title", q).css("color", m), "" != n && a(".cq-expandgrid-subtitle", q).css("color", n), "" != g && a(".cq-expandgrid-title", q).css("font-size", g), "" != h && a(".cq-expandgrid-subtitle", q).css("font-size", h), i > 0 && "customized" == e && a(".cq-expandgrid-face", q).css("height", i), "" != f && "customized" == o && a(".cq-expandgrid-face", q).css("background-color", f), "" != j && a(".cq-expandgrid-icon", q).css("color", j), "" != k && a(".cq-expandgrid-icon", q).css("font-size", k), "" != c && "undefined" != c && c && a(".cq-expandgrid-face", q).css({ 
       "background-image": "url(" + c + ")" 
      }), "image" == p && "" != d && "undefined" != d && d && a(".cq-expandgrid-avatar", q).css({ 
       "background-image": "url(" + d + ")" 
      }) 
     }), 
     q = null; 
    d.on("mouseover", function(a) { 
     clearInterval(o) 
    }).on("mouseleave", function(a) { 
     j > 0 && r() 
    }), a(".cq-expandgrid-toggle", p).click(function() { 
     var b = a(this).closest(".cq-expandgrid-item"); 
     b.data("backgroundcolor"); 
     if (k = b.data("index"), clearInterval(o), q && !b.is(q)) { 
      q.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.removeClass("outfoucs"); 
      var d = a("iframe", q).attr("src"); 
      d && "" != d && (d.indexOf("youtube") > -1 || d.indexOf("vimeo") > -1) && (a("iframe", q).attr("src", ""), a("iframe", q).attr("src", d)) 
     } 
     b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs")) 
    }), (n || j > 0) && a(".cq-expandgrid-toggle", p).eq(0).trigger("click"), j > 0 && r(), p.find(".cq-expandgrid-close").click(function() { 
     var b = a(this).closest(".cq-expandgrid-item"); 
     b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), p.not(b).removeClass("outfoucs") 
    }) 
}) 

});

@TTCC, Hier ist der Code, den ich nach Ihrem Vorschlag umgesetzt:

b.hasClass("cq-expandgrid-initstate") ? (q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs")), b.hasClass("cq-expandgrid-initstate") && a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 50 }, 500); 
    }) 

Answer 1

Ihr JavaScript-Code hat zwei Skript-Tag in Ihrer Seite, und dieser Fehler kann Code nicht ausführen.

Eigentlich müssen Sie nicht ein Stück Code allein schreiben, und verschieben Sie es einfach auf die "cq-expandgrid-toggle" Click-Ereignis in vc-Erweiterungen-expandgrid/js/init.min.js "-Datei .

Sie können die Eigenschaft jQuery.animate() und scrollTop verwenden, um dies zu erreichen.

Ersetzen Code in init.min.js Datei aus Zeile 63 bis 65 (vor "})") von meinem Code unten:

b.hasClass("cq-expandgrid-initstate") ? (a('body').stop().animate({scrollTop: b.find(".cq-expandgrid-content").offset().top - 0}, 200),q = b.removeClass("cq-expandgrid-initstate").addClass("cq-expandgrid-openstate"), p.not(b).hasClass("outfoucs") || f && p.not(b).addClass("outfoucs")) 
        : (b.removeClass("cq-expandgrid-openstate").addClass("cq-expandgrid-initstate"), f && p.not(b).removeClass("outfoucs")); 

"500" eine Zahl in Millisekunden zu bestimmen, wie lange die Animation wird ausgeführt, und Sie können es nach Ihrem Wunsch ändern.

Und entfernen Sie den Übergangsstil von .cq-expandgrid-Inhalt in /wp-content/plugins/vc-extensions-expandgrid/css/style.css Datei (etwa Zeile 378).

transition: all 0.2s ease-in-out; 

Here ist ein Kinderspiel.

Answer 2

wie dies versucht:

$(".cq-expandgrid-item").click(function() { 
    var $this = $(this); 
    $('html, body').animate({ 
     scrollTop: $this.find(".cq-expandgrid-content").offset().top 
    }, 5000); 
}); 

PD: mit $ ("CQ-expandgrid-Inhalt."). offset(). top Sie versuchen, mehrere Werte zu bekommen, weil es viele .cq-expandgrid-content "Vorkommen