zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Softscroll zum Anker

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.03.2015, 09:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard Softscroll zum Anker

Ich habe hier eine Coole Funktion
https://css-tricks.com/examples/SmoothPageScroll/
Beschreibung:
Smooth Scroll - elegantes Scrollen mit Jquery | Elmastudio

die scrollt über 2 Links zu bestimmten Positionen und zwar soft.
Das ganze funktioniert über JQuery, davon bin ich kein Freund:

1. Geht das auch ohne JQuery ?

2. Wie kann ich erreichen, dass ich über eine Funktion zum Anker springe?
In Beispiel funktioniert es über einen Link:
<a name="top" id="top"></a>


Bei meinem Formular soll eine Funktion zum Anker springen,
wenn ein bestimmtes Feld nicht ausgefüllt wird.
if (document.getElementById('ort').value=='') zum_feld()
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.03.2015, 09:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

jQuery ist nichts anderes als javascript. Also alles, was du mit jquery machen kannst kannst du auch mit javascript lösen. Falls du fragst, wie dieser soft-scroll ohne jquery funktioniert: jQuery ist open-source, du kannst dort den Code studieren (Viel Spaß dabei )
Ansonsten kannst du nach soft scrolling javascript oder ähnliches googlen in der Hoffnung dass du funktionierenden Code findest. Vergiss dann aber nicht, diesen auch in unterschiedlichsten Browsern zu testen (IE 8,9,10,11 Chrome Firefox ...) jquery ist schon von Haus aus so geschrieben, dass es in allen (großen) Browsern funktioniert.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.03.2015, 09:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
jQuery ist nichts anderes als javascript. Also alles, was du mit jquery machen kannst kannst du auch mit javascript lösen. Falls du fragst, wie dieser soft-scroll ohne jquery funktioniert: jQuery ist open-source, du kannst dort den Code studieren (Viel Spaß dabei )
Ansonsten kannst du nach soft scrolling javascript oder ähnliches googlen in der Hoffnung dass du funktionierenden Code findest. Vergiss dann aber nicht, diesen auch in unterschiedlichsten Browsern zu testen (IE 8,9,10,11 Chrome Firefox ...) jquery ist schon von Haus aus so geschrieben, dass es in allen (großen) Browsern funktioniert.
ich habe ja nichts gegen jquery wenn es funktioniert,
mein Hauptproblem ist ja, wie springe ich über eine Funktion zum Anker
(mit jquery)

Im Netz habe ich eine Funktion ohne jquery gefunden:
Langsam an den Anfang einer Seite springen mit der Smooth-Scroll-Funktion
echt viel Code, und ich bin mir auch nicht sicher, ob man das einfach so verwenden darf, daher doch lieber jquery
Mit Zitat antworten
  #4 (permalink)  
Alt 25.03.2015, 10:14
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das sind zwei Zeilen in dem Code, den du selbst verlinkt hast:
Ich hab's mal rauskopiert. Du musst nur dafür sorgen, das der Parameter ein jQuery Objekt ist.

Code:
function scrollTo(target){
    if(!target) return;
    var targetOffset = target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}
Mit Zitat antworten
  #5 (permalink)  
Alt 25.03.2015, 23:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Böse

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Ich hab's mal rauskopiert. Du musst nur dafür sorgen, das der Parameter ein jQuery Objekt ist.

Code:
function scrollTo(target){
    if(!target) return;
    var targetOffset = target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}
ich musst leider gestehen, ich habe noch nie so richtig was mit jquery gemacht.
Habe zwar schon Google gefragt, aber nichts gefunden, wie ein Objekt erstellt wird.
Mit Zitat antworten
  #6 (permalink)  
Alt 26.03.2015, 09:07
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von seerose Beitrag anzeigen
ich musst leider gestehen, ich habe noch nie so richtig was mit jquery gemacht.
Habe zwar schon Google gefragt, aber nichts gefunden, wie ein Objekt erstellt wird.
Mit $()
Mit Zitat antworten
  #7 (permalink)  
Alt 27.03.2015, 16:40
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard

ich schaffe das letzte Prozent nicht...

aufgerufen z.B. über ein Button Onlick=scrollTo(ziel)

Code:
function scrollTo(target){
    if(!target) return;

// target umwandel
 $(target) =target   // ist hackt es noch

    var targetOffset = target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}
Mit Zitat antworten
  #8 (permalink)  
Alt 27.03.2015, 18:35
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von seerose Beitrag anzeigen
ich schaffe das letzte Prozent nicht...

aufgerufen z.B. über ein Button Onlick=scrollTo(ziel)

Code:
function scrollTo(target){
    if(!target) return;

// target umwandel
 $(target) =target   // ist hackt es noch

    var targetOffset = target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}
Nein das ist Quark. Da muss nichts umgwandelt werden.

target muss ein jQuery Objekt sein! So in etwa:
Code:
scrollTo($(ziel));

function scrollTo(target){
    if(!target) return;

   var targetOffset = target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}
EDIT: Kleine Änderung
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anker Textfarbe "permanent" ändern. kifkef CSS 17 21.03.2012 18:42
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite Chico_wau CSS 2 14.05.2007 19:08
Seitenübergreifender Anker funzt net unter IE dablake CSS 6 06.03.2006 22:44
IE6, CSS, Anker und XHTML Smirftsch CSS 7 14.02.2006 19:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:35 Uhr.