# sanftes Scrollen mit jQuery in Einkaufswelten
**URL:** https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700
**Category:** Themes & Design
**Created:** [27. Oktober 2015 um 11:19 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700 "2015-10-27T11:19:17Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@DaSan](https://forum.shopware.com/u/DaSan)
#### Post date: [27. Oktober 2015 um 11:19 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/1 "2015-10-27T11:19:17Z")
Hallo zusammen, ich möchte gerne in den Einkaufswelten bei langen html-Seiten Anker verwenden und erreichen, dass zu diesen nicht gesprungen, sondern sanft gescrollt wird. Hier das verwendete Script: `$(document).ready(function() { $('a[href\*=#]').on("click", function(event) { event.preventDefault(); var ziel = $(this).attr("href"); $('html,body').animate({ scrollTop: $(ziel).offset().top }, 2000 , function (){location.hash = ziel;}); }); return false; });` Wenn ich den Code in eine .js-Datei auslagere und über meine theme.php einbinde funktioniert es leider nicht. Wenn ich ihn direkt in der Einkaufswelt als plain-html (unter Umgehung des TinyMCE Editors) als Script einbinde, dann funktioniert es mal, mal geht es nicht. Meist beim ersten Mal geht es, sobald ich aber über die Navigation eine andere Seite auswähle und dann wieder zurück komme, geht es nicht mehr und es wird zum Anker gesprungen statt gescrollt. Hat jemand eine Idee oder generell das Thema sanftes Scrollen zu Ankern bereits gelöst? Ich habe leider im Forum nichts gefunden. Vielen Dank für Eure Hilfe vorab. Daniel
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [27. Oktober 2015 um 11:38 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/2 "2015-10-27T11:38:48Z")
Das liegt daran, dass die EK nachgeladen wird. Versuch es mal mit [http://api.jquery.com/ajaxcomplete/](http://api.jquery.com/ajaxcomplete/) Oder du lauschst auf das Event welches die EK nachlädt: [https://developers.shopware.com/designe … t-observer](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#global-jquery-event-observer)
---
### Author:  [@DaSan](https://forum.shopware.com/u/DaSan)
#### Post date: [28. Oktober 2015 um 16:18 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/3 "2015-10-28T16:18:32Z")
Super, vielen Dank für Deine Hilfe. Nun funktioniert es FAST wie gewollt. Kleines Problem: Es scrollt nun schön sanft an die richtige Stelle. Will ich aber nun z.B. mit der Maus weiter scrollen, dann will Shopware an dieser Stelle bleiben und springt dahin zurück. Erst nach ca. 40-50 Sekunden ist diese „Sperre“ aufgehoben, und ich kann normal auf der Seite weiter scrollen. Hast Du eine Idee, woran das liegen könnte? Vielen Dnak Daniel
---
### Author:  [@DaSan](https://forum.shopware.com/u/DaSan)
#### Post date: [28. Oktober 2015 um 16:59 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/4 "2015-10-28T16:59:38Z")
So, jetzt geht’s. Ich hatte davor die Seite mit mehreren Einkaufswelten untereinander aufgebaut, und die Anker waren über die unterschiedlichen Einkaufswelten verteilt. Nun habe ich alles in nur 1 Einkaufswelt, jetzt geht es. Falls trotzdem jemand eine Idee hat, wieso das so ist und wie man es lösen kann, dann danke für einen Tipp. Es könnte ja mal sein, dass ich doch wieder mehrere Einkaufswelten parallel aufschalten möchte.
---
### Author:  [@taaucher](https://forum.shopware.com/u/taaucher)
#### Post date: [28. Oktober 2015 um 18:07 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/5 "2015-10-28T18:07:27Z")
Kannst du die Seite posten damit man sich das Ergebnis ansehen kann? Gern auch per PN.
---
### Author:  [@Mike77](https://forum.shopware.com/u/Mike77)
#### Post date: [10. Oktober 2016 um 14:01 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/6 "2016-10-10T14:01:26Z")
Hallo,
ich habe das gleiche Problem wie DaSan. Habe 2 Einkaufswelten untereinander und scrollt wunderbar smooth bis dorthin. Auch dann habe ich dort eine Sekunden lang eine „Sperre“. Weiss jemand Rat?
Der Link zur Arbeitsseite [http://quicksuit.de/shopware-35/en/](http://quicksuit.de/shopware-35/en/)
In der Slideshow haben die Buttons der ersten beiden Slides einen Scrolllink zu den Einkaufswelten.
Danke schon mal LG Mike
---
### Author:  [@designhuette](https://forum.shopware.com/u/designhuette)
#### Post date: [27. September 2018 um 19:47 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/7 "2018-09-27T19:47:22Z")
Hallo,
ich habe auch das Problem mit dem direkten Springen.
Leider wurde nicht gepostet wo welches Script verändert wurde um das zu verhinden.
Kann das jemand nochmal posten?
Danke und VG Michael
---
### Author:  [@karlharris](https://forum.shopware.com/u/karlharris)
#### Post date: [27. September 2018 um 20:07 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/8 "2018-09-27T20:07:18Z")
[ajaxStop()](https://api.jquery.com/ajaxStop/) ist die Lösung, denke ich:
```
emotionLoaded = false;
$(document).ajaxStop(function()
{
if(!emotionLoaded)
{
/** Hier das Script */
emotionLoaded = true;
}
});
```
Ohne $(document).ready() dann…
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [28. September 2018 um 02:06 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/9 "2018-09-28T02:06:32Z")
Obiger Kommentar ist eigentlich recht unsauber, da es wie gesagt über die Events gelöst wird, oder werden sollte.
Hier die Lösung: [https://forum.shopware.com/discussion/36794/jquery-aktivieren#Comment\_159215](https://forum.shopware.com/discussion/36794/jquery-aktivieren#Comment_159215)
---
### Author:  [@designhuette](https://forum.shopware.com/u/designhuette)
#### Post date: [28. September 2018 um 15:00 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/10 "2018-09-28T15:00:04Z")
Hmmm,
danke aber es will noch nicht so richtig. Evtl war auch ein Fehler im Code von DaSan. Ich hatte da was geändert da der a[href\*=#] und .top als Fehler in der Console angezeigt wurden. Ich hatte es auch schon mit document ready versucht. Ich hatte auch schon a[href\*=//#] probiert, ohne Erfolg.
Kann es sein, dass das Script mit einer neueren Shopware Version nicht mehr geht?
Den Code hab ich als .js File eingebunden:
```
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
$('a[href*="#"]').on("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offsetTop
}, 2000 , function (){location.hash = ziel;});
});
});
```
---
### Author:  [@designhuette](https://forum.shopware.com/u/designhuette)
#### Post date: [28. September 2018 um 15:20 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/11 "2018-09-28T15:20:03Z")
Ich komme dem Problem näher.
```
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
$('a[href*="#"]').on("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
});
```
Mit diesem Code sagt er mir:
Uncaught TypeError: Cannot read property ‚top‘ of undefined
Jemand eine Idee?
Oder kann man nicht einfacher den Sprung über 2 # Elemente bei Shopware abfangen?
In jquery.scroll.js und emotions.js ha ich nichts gefunden…
---
### Author:  [@designhuette](https://forum.shopware.com/u/designhuette)
#### Post date: [1. Oktober 2018 um 12:24 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/12 "2018-10-01T12:24:08Z")
So, ich habe jetzt die Lösung. Das Scrollen wird im swStoryTelling Plugin verwaltet. Mit einem Override kann man hier die Funktion noAnimation überschreiben. Ich habe hier die scrollTo Funktion vollständig überschrieben. Es geht bestimmt auch eleganter mit nur einer Oprtionsänderung und me.superclass.scrollTo.apply(this, arguments). Allerdings hatte ich schon genug Zeit investiert und kann damit leben. Wer es mag, kann es ja noch etwas schlanker machen :)
Als eigenes Script einbinden:
```
(function ($){
$.overridePlugin('swStoryTelling', {
scrollTo: function (index, noAnimation) {
var me = this,
noAnim = noAnimation || false,
startIndex = (index <= 0),
endIndex = (index > me.sections),
i = (startIndex) ? 0 : (endIndex) ? me.sections + 1 : index,
scroll = (startIndex) ? 0 : (endIndex) ? me.offsetBottom : me.getSectionOffset(index),
hash = (startIndex) ? 'start' : (endIndex) ? 'bottom' : index;
me.activeIndex = i;
me.scroll(scroll); // ,noAnim entfernt
me.setActiveLink(i);
me.setUrlHash(hash);
//(noAnim) ? me.setVisibleContent(i) : delay($.proxy(me.setVisibleContent, me, i), 100);
$.publish('plugin/swStoryTelling/onScrollTo', [me, index, noAnimation]);
},
});
})(jQuery);
```
---
### Author:  [@skarpeta](https://forum.shopware.com/u/skarpeta)
#### Post date: [13. April 2021 um 11:56 UTC](https://forum.shopware.com/t/sanftes-scrollen-mit-jquery-in-einkaufswelten/31700/13 "2021-04-13T11:56:37Z")
Wie genau kriege ich denn jetzt jQuery zum laufen nachdem die Einkaufswelt geladen ist?
$.subscribe(‚plugin/swEmotionLoader/onLoadEmotionFinished‘, function() {
alert(‚Test‘);
});
funktioniert bei mir nicht.