[...] Kann man das Tempo einstellen, sodass die Seite zum Ankerpunkt scrollt? [...]

Wie @Markus73 schon sagte, mit den Funktionen, die Dir der WD zur Verfügung stellt, ist es nicht möglich. Aber...

Du kannst den Funktionsumfang des WD beträchtlich erweitern, wenn Du z. B. die JQuery Bibliothek einbindest.

Für Deinen Fall musst Du dann nur noch einen JavaScirpt Codeschnipsel auf der Seite anlegen und schon funktioniert's.

Hier kannst Du Dir eine so erstellte Demo ansehen...

So sieht der JS Code aus, der einerseits die JQ Bibliothek einbindet und andererseits eine damit erstellte Funktion bereitstellt, die für das smooth Scrolling sorgt.

-----------------------------
<!-- jQuery enbinden von Google-->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
// jQuery laden
google.load("jquery", "1.3.2");
</script>

<!-- jQuery Code -->
<script type="text/javascript">

$(document).ready(function() {
// Alle internen Links auswählen
$('a[href*=#]').bind("click", function(event) {
// Standard Verhalten unterdrücken
event.preventDefault();
// Linkziel in Variable schreiben
var ziel = $(this).attr("href");
//Scrollen der Seite animieren, body benötigt für Safari
$('html,body').animate({
//Zum Ziel scrollen (Variable)
scrollTop: $(ziel).offset().top
// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
}, 2000 , function (){location.hash = ziel;});
});
return false;
});
</script>
-----------------------------

Die im Code grün markierten Zeilen sind Infos oder Kommentare. Du kannst sie löschen.

Wichtig!
Wenn der Code mit dem Magix Web Designer umgesetzt werden soll, darf kein "normaler" Link auf einen Anker im Editor gesetzt werden.
Stattdessen muss ein Platzhalter verwendet werden, in den das Sprungziel (der Anker) im HTML Body eingefügt wird.
Das kann so aussehen, wenn das Sprungziel z. B. "Kapitel1" heißt:

<a href="#kapitel1">Kapitel1</a>

Bei einem "normalen" Link wird vom WD immer die Funktion "on MouseMove" aktiviert, die den korrekten Ablauf des SmoothScroll verhindert!

Viel Erfolg

---------------------

Edit: 20:21 h

Offenbar hat Magix mal wieder die Eigenschaften des Forum Editors "verbessert".

Der o. a. Code wird nach einem "src=" abgeschnitten und der komplette Rest des Postings unterschlagen, wenn ein "http:" folgt

Du musst also im gelb markierten Bereich des o. a. Code vor den beiden Slashes "//" noch ein "http:" einfügen...

Hm, vielleicht stelle ich mir das etwas zu leicht vor, aber mal Schritt für Schritt, so wie ich es probiert habe:

Das Platzhalterobjekt, zu dem ich via Mousklick scrollen will habe ich mit dem Body-Code:

<a href="#Kapitel1">Kapitel1</a>

versehen, und den Code:

<!-- jQuery enbinden von Google-->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
// jQuery laden
google.load("jquery", "1.3.2");
</script>

<!-- jQuery Code -->
<script type="text/javascript">

$(document).ready(function() {
// Alle internen Links auswählen
$('a[href*=#]').bind("click", function(event) {
// Standard Verhalten unterdrücken
event.preventDefault();
// Linkziel in Variable schreiben
var ziel = $(this).attr("href");
//Scrollen der Seite animieren, body benötigt für Safari
$('html,body').animate({
//Zum Ziel scrollen (Variable)
scrollTop: $(ziel).offset().top
// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
}, 2000 , function (){location.hash = ziel;});
});
return false;
});
</script>

...auf der Indexseite in den Header copiert.

Der Textbutton, der zum Anker_Platzhalter führen soll habe ich mit Link auf Anker: Kapitel1 versehen.

Scrollt aber nicht, sodern springt den Anker sofort an.

Was mach ich da alles verkehrt???

DoRo03

[...] Was mach ich da alles verkehrt? [...]

Nicht viel...

Du musst nur das noch fehlende "http:" vor die beiden Slashes "//" setzen.

Wenn der Forum Editor es zulässt, sollte es in Zeile 2 des Codes wie unten gezeigt aussehen, also so wie ich es in meinem Edit zum 1. Kommentar beschrieben habe:

-----------------------
[...]
src="http://www ...
[...]
----------------------

Außerdem darfst Du auf keinen Fall die Link Funktion des WD benutzen.

Wie ich in meinem letzten Kommentar schon gesagt habe, wird bei einem "normalen" Link vom WD immer die Funktion "on MouseMove" aktiviert, die den korrekten Ablauf des SmoothScroll verhindert!

So sollte der Link aussehen, der einem (Platzhalter) Button zugewiesen wird:

Lies Dir nochmal meinen letzten Kommentar genau durch und probier's dann nochmal

Viel Erfolg

Schritt für Schritt allles so gemacht, aber es funktioniert nicht. Die über den Code verlinkten Platzhalter (keine Verlinkung, sondern so wie Du es beschrieben hast) werden ohne scrollen angesprungen.

Kann es vielleicht an einer Objektebene liegen, auf der auch die Navigationsbuttons liegen, von welchen ich meine Anker ansteuere? Diese Ebene ist fixiert und die Seite lässt sich "manuell" hinter dieser Ebene scrollen.

Diese Ebene habe ich mit  !FixedTab, einem Tutorial von marboe erstellt:

http://www.magix.info/de/objekte-fixieren-webdesigner-9-premium.online-training.1014863.html

Den iQuery Code habe ich ...auf der Indexseite in den Header copiert?

DoRo

[...] Kann es vielleicht an einer Objektebene liegen [...]

[...] Diese Ebene habe ich mit  !FixedTab, einem Tutorial von marboe erstellt [...]

Wenn die JQ Funktion auf der Ebene liegt, die gescrollt werden soll, müsste alles so funktionieren, wie beschrieben.

Die gegenseitige Beeinflussung von zusätzlichen Codes ist allerdings nie ausgeschlossen. Genaueres lässt sich aber nur sagen, wenn Du die "Problemseite" online stellst, dann könnte man einen Blick in den Quellcode werfen...

Wenn Du die URL noch nicht öffentlich machen möchtest, kannst Du mir gerne auch eine PN schicken.

Hab mal das ganze nachgebaut und komme zum selben Ergebnis das die Seite springt und nicht scrollt

Es geht aber überhaupt nur im IE und im FF nicht.

Hier wäre der link zur Seite koppere.magix.net

Und hier die Screendshots wie ich es eingebaut habt. Es sollte eben von oben Platzhalter Kapitel1 nach unten scrollen zum schwarzen Rechteck mit Namen Kapitel1. Wo ist der Fehler??

Habe ebenfalls die Anleitung von BeRo in einer einfachen Seite nachgebaut und es funktioniert, wenn die HTML-Platzhalter auf der Ebene der Navigationsleistengruppe liegen, sonst nicht.

Allerdings ist die erste Navigation ein Sprung und erst nach Klick auf den "Zurück" Button (Normale Verlinkung auf den Anfang der Seite) scrollt das ganze dann. Funktioniert im IE und im FF. Allerdings lädt der FF die Seite nicht vom Start, sondern vom Ende? - Aber ich denke da sind dann "Feinabstimmungen"?

Im Fall meiner Seite mit dem Statischen Navigationsteil am Seitenstart liegt es vermutlich am Aufbau. Frage an BeRo: Wie kann ich den JQ-Code einer einzelnen Ebene oder dem Page Background zuordnen?

@koppere

[...] Wo ist der Fehler? [...]

Du findest ihn (oder besser "sie")

1. in der fehlerhaften Namenvergabe und
2.  in der fehlerhaften Platzhaltervergabe.

Zu1)
Du hast dem Sprungziel die ID "Kapitel1" gegeben, der Verweis im Link zeigt aber auf "kapitel1"

Zu2)
Du hast einen Text als Platzhalter "missbraucht", das funktioniert in dem Fall nicht.

Lösung:

Groß Kleinschreibung korrigieren und einen "richtigen" Platzhalter benutzen, z. B. ein Rechteck. Wenn der Link korrekt angelegt wird, erscheint auf der Seite anstelle des Rechtecks der Text, den Du in der Zeile "<href=...>" angeben solltest.

------------------------

@DoRo03

[...] Allerdings ist die erste Navigation ein Sprung [...]

Das könnte daran liegen, dass Du den Link zur Quelle des JQ Codes ohne das führende "http:" angegeben hast.

Die Schreibweise (src="//www.google.com/jsapi") ist zwar nicht grundsätzlich falsch, sie wird aber nicht von allen Browsern korrekt interpretiert.

[...] Wie kann ich den JQ-Code einer einzelnen Ebene oder dem Page Background zuordnen? [...]

Du kannst den Code mit dem WD Editor in den HTML Head der Website legen. Er steht dann automatisch allen Seiten zur Verfügung, die Du mit dem WD anlegst. Das gilt auch für Seiten, die Du z. B. für fixierte Objekte benutzt.

Leider funktioniert der seitenübergreifende Aufruf trotzdem nicht. Die in unserem Beispiel verwendete Methode kann nicht auf einer Seite gestartet werden und auf einer anderen Seite ausgeführt werden, das gilt auch, wenn der Inhalt beider Seiten gleichzeitig zu sehen sein sollte...

Noch Fragen?

@BeRo

Tja, manchmal klappt was! Das http: verändert in der Testdatei nichts, aber in meiner eigentlichen Website scrollts nun munter rauf und runter. Tolle Sache (JQ).

Der "Home-Button" funktioniert plötzlich nicht mehr, aber den mach ich nun ebenfalls "zurückscrollbar" und mein Widget, das mehrere Bilder überblenden soll hats zerschossen.

Was mich Stört ist, dass die Platzhalter für Kapitel1 / Kapitel2 auf der fertigen Seite nur in einer Farbe Dargestellt werden können. Mein Hintergrund ist Streifig eingeteilt und jeder Platzhalter sitzt auf einer anderen Farbe.

Vielen Dank für Deine Geduld.

DoRo03

[...] Was mich Stört ist, dass die Platzhalter [...] nur in einer Farbe Dargestellt werden können [...]

Du kannst die Platzhalter beliebig manipulieren, wie ich es z. B. anhand der Buttons in der Demo gezeigt habe.

Damit ist es möglich, jede Art von Grafiken-, Bildern-, Texten-, etc. als Klickobjekt für die Auslösung des Scroll Effekts herzurichten.

Wenn Du eine Grafik (z. B. einen Button) vorbereitest, bindest Du sie anschließend im HTML Body des Platzhalters so ein:

----------------------------
<a href= '#bottom'><img src="./index_htm_files/bottom.jpg" width=118px height=28px border=0></a>
----------------------------

im HTML Code ist der Name der Grafik "bottom.jpg" aufgeführt. Der gelb markierte Bereich ergänzt den Standardbereich, der für "normale" Textlinks verwendet wird.

Die Grafik muss manuell auf Deinem Webspace im Verzeichnis "index_htm_files" abgelegt werden. Alternativ- und deutlich bequemer geht es, wenn du sie vor dem Upload in einem Hilfsverzeichnis Deines Projekts deponierst. Dann sorgt der WD automatisch dafür, dass sie beim Upload im richtigen Verzeichnis landen...

Viel Erfolg

@koppere

[...] Wo ist der Fehler? [...]

Du findest ihn (oder besser "sie")

1. in der fehlerhaften Namenvergabe und
2.  in der fehlerhaften Platzhaltervergabe.

Zu1)
Du hast dem Sprungziel die ID "Kapitel1" gegeben, der Verweis im Link zeigt aber auf "kapitel1"

Zu2)
Du hast einen Text als Platzhalter "missbraucht", das funktioniert in dem Fall nicht.

Lösung:

Groß Kleinschreibung korrigieren und einen "richtigen" Platzhalter benutzen, z. B. ein Rechteck. Wenn der Link korrekt angelegt wird, erscheint auf der Seite anstelle des Rechtecks der Text, den Du in der Zeile "<href=...>" angeben solltest.

Noch Fragen?

Ja

Fehler korrigiert aber immer noch Sprungergebnis: Seite nochmal komplett neu koppere.magix.net

2:

3:

@koppere

[...] Fehler korrigiert aber immer noch Sprungergebnis [...]

Der Platzhalter mit dem Link liegt eventuell in einer falschen Ebene (Background?).

Verschiebe ihn mal an eine obere Position in der MouseOff Ebene. Mit ein bisschen Glück klappt's dann schon...

Unabhängig davon solltest Du unbedingt das Update auf die aktuelle Version 10.0.4.35041 des WD10 machen. Es ist gut möglich, dass Dein Problem danach nicht mehr auftritt.

Im Quellcode Deiner Seite fehlt eine Klassenzuordnung (class="xr_noreset ") zur DIV Box des Platzhalters für den Scroll-Link. Wenn ich die Zuordnung manuell einfüge, funktioniert das langsame Scrollen wie gewünscht...
Da Du als User keinen Einfluss auf die Klassenzuordnung hast, bleibt nur der WD als "Schuldiger".

Spendiere ihm also das fällige Update und exportiere die Problemsite dann noch einmal.

Viel Erfolg

@koppere

[...] Fehler korrigiert aber immer noch Sprungergebnis [...]

Der Platzhalter mit dem Link liegt eventuell in einer falschen Ebene (Background?).

Verschiebe ihn mal an eine obere Position in der MouseOff Ebene. Mit ein bisschen Glück klappt's dann schon...

Nein, die waren schon alle in der Mouse off

Unabhängig davon solltest Du unbedingt das Update auf die aktuelle Version 10.0.4.35041 des WD10 machen. Es ist gut möglich, dass Dein Problem danach nicht mehr auftritt.

Im Quellcode Deiner Seite fehlt eine Klassenzuordnung (class="xr_noreset ") zur DIV Box des Platzhalters für den Scroll-Link. Wenn ich die Zuordnung manuell einfüge, funktioniert das langsame Scrollen wie gewünscht...
Da Du als User keinen Einfluss auf die Klassenzuordnung hast, bleibt nur der WD als "Schuldiger".

Spendiere ihm also das fällige Update und exportiere die Problemsite dann noch einmal.

Viel Erfolg

Das update war es. Nachdem ich das drüber laufen lief ging auch das scrollen.

Problem ist jetzt nur das ich mir mit dem Update wieder meine Page zerschiesse und da jetzt wieder die Galleriedarstellung geht aber das bekomme ich durch downgrade wieder hin

lg

Genau die Div Zuordnung wird beim WD10 ohne Update nicht gemacht

ohne Update

<div style="position: absolute; left: 203px; top: 26px; width: 187px; height: 37px;">
<a href="#kapitel1">Kapitel1</a>

mit Update

<div  class="xr_noreset "style="position: absolute; left: 203px; top: 26px; width: 187px; height: 37px;">
<a href="#kapitel1">Kapitel1</a>

Hallo, da bin ich wieder, denn nachdem ich mich dem "zerschossenen Widget" gewidmet habe, ist mir folgendes aufgefallen:

Wenn ich das Widget lösche funktioniert auch das scrollen nicht mehr? - Wigget rein und es scrollt wieder!

Wäre ja ganz toll, - aber das Widget "zerschiesst" es beim importieren.

Ich habe die aktuelle Version 10.0.4.35041 des WD

DoRo03

[...] Wenn ich das Widget lösche funktioniert auch das scrollen nicht mehr [...]

Die smoothscroll Funktion ist natürlich auch ohne eingebautes Widget lauffähig.

Aus den geposteten Screenshots ist nichts "Verdächtiges" zu entnehmen. Wie weiter unten schon gesagt, setzt eine sinnvolle Fehleranalyse zumindest einen Einblick in den Quellcode der betroffenen Seite voraus. Ideal wäre ein Zugriff auf die *.web Datei des Projekts.
Alternativ könnte auch eine ganz detailliert aufgeführte Beschreibung Deiner Vorgehensweise beim Einbau des Scripts helfen. Wenn Du das Ganze dann noch mit "lesbaren" Screenshots ergänzt, könnte man sicher mehr sagen...

Probier's nochmal.

Eine schöne Anleitung. Hat auch gleich beim ersten mal geklappt.

Eine Frage aber noch:

Kann man das auf dieses Beispiel anwenden?

http://www.webdesigner-v10-demoseite.com/sale/#

Ist mit WD 10 Premium gemacht worden.

Ich könnte mir vorstellen dass man dem jQuery Code irgendwie "sagen" muss... hey jetzt bitte horizontal scollen :-)

Wie kann man das anstellen

Für Antworten danke ich schon im Vorraus

Gruss

Vik

@vikkiv

[...] Ich könnte mir vorstellen dass man dem jQuery Code irgendwie "sagen" muss... [...]

Wenn Du eine Seite als horizontal angeordnete Seiteneffekt Site angelegt hast, musst Du keinerlei Tricks anwenden, um ein sanftes Scrollen zu einem Anker zu erreichen.

Es genügt, wenn Du einen ganz normalen "Link auf Anker" setzt, um horizontal (und ggf. noch vertikal), sanft zu einem vorab definierten Anker zu scrollen.

Probier's einfach mal aus...

Vielen Dank für diese gute Anleitung. Nun funktioniert auch bei mir die "smoothscroll" Funktion.

Jedoch, wenn ich danach eine zusätzliche Website-Variante (z.B. für Smartphone) hinzufügen will, dann funktioniert die smoothscroll Funktion, nur in der alten Variante. In der neuen löst sie sogar einen Fehler aus, so dass man ein paar Sekunden gar nicht scrollen kann, aber sonst passiert da nichts.

Weiß da jemand vielleicht noch einen Rat???

@maiky_mouse

[...] wenn ich danach eine zusätzliche Website-Variante (z.B. für Smartphone) hinzufügen will, dann funktioniert die smoothscroll Funktion, nur in der alten Variante [...]

Das liegt daran, dass der WD die Steuerung beider Varianten in einer HTML Datei organisiert. Variable-, CSS/JS Klassen/Funktionen/Variable dürfen daher nur als Unikate eingesetzt werden.
Das heißt, dass Du auf jeder Varianten Seite die eingesetzten Funktionen-, Variable-, Klassen-, IDs-, etc. sicherheitshalber separat benennen musst.
Zum Beispiel muss die Variable "ziel" in der Smartphone Version dann z. B. "ziel_S" heißen usw.

Der "Neubau" der Scriptlets ist zwar etwas mühselig, er lässt sich aber IMHO nicht vermeiden... 😕

Dennoch gerne viel Erfolg

Vielen Dank für die schnelle Antwort. Aber selbst, wenn ich ich in der neuen Variante alles lösche und nur 2 Rechtecke mit neuem Namen einfüge (Rechteck1 soll smoothscrollen zu Rechteck2 mit:"<a href="#rechteck2">Rechteck2</a>), dann funktioniert es auch nicht. Nur in der alten Variante.

Wie könnte ich dieses Problem denn lösen?

@maiky_mouse

[...] selbst, wenn ich ich in der neuen Variante alles lösche [...] funktioniert es auch nicht. Nur in der alten Variante [...]

Die Fehlerbeschreibung ist leider nicht deutlich genug... 😒

Wie in meinem letzten Kommentar erklärt, sollte der Effekt funktionieren, wenn die dazu eingebaute JS Funktion alleine auf der Seite steht.
In dem Kontext ist die "Seite", die komplette HTML Datei einer Seite. Die enthält den HTML Code für alle angelegten Varianten, also in Deinem Fall für die Desktop Variante und für die Smartphone Variante.

Wenn Du testen möchtest, ob die Scroll Funktion in der Smartphone Variante funktioniert, solltest Du zunächst den schon angelegten JS/HTML Code komplett aus dem Seiteninhalt löschen, inkl. aller angelegten Links, die darauf zeigen.
Danach legst Du die Funktion in der Smartphone Variante neu an. Dann sollte der Scroll Effekt auch da funktionieren.

Nach erfolgreichem Test kannst Du den Neubau der Funktion für die Desktop Variante starten. Dabei bitte berücksichtigen, dass alle referenzierten Funktionen-, Variable-, Klassen-, IDs-, etc. sicherheitshalber neu benannt werden sollten, um Überschneidungen zu vermeiden.

Probier's nochmal. 😉

Viel Erfolg