Tutorials JQUERY

Alle Tutorial können zur privaten Nutzung kopiert bzw. benutzt werden. Bei kommerzieller Nutzung MUSS ein Hinweis zu kanedesign.de vermerkt werden!

Was ist jQuery

jQuery (auch: jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt.jQuery ist die meistverwendete JavaScript-Bibliothek. Jede zweite Website und drei Viertel der 10.000 meistbesuchten Websites nutzen jQuery (Stand: Juli 2014). jQuery wird in vielen Content-Management-Systemen und Webframeworks bereits mitgeliefert, zum Beispiel in Joomla, WordPress, MediaWiki oder Drupal.

Quelle: wikipedia.org

09.03.2017 // Smooth Scrollingend

In diesem Tutorial wird eine langsame Scroll Funktion, auch Smooth Scrolling genannt, an eine bestimmte Position im Dokument gezeigt.
Für die Umsetzung werden jQuery und Javascript verwendet.

Benötigt werden 4 Dateien
1. HTML Datei: index.htm
2. CSS Datei: style.css
3. JavaScript Datei: javascript.js
4. jQuery Datei: jscript.js

Folgedner Code wird in die einzelnen Dateien kopiert:

HTML Datei:
<!doctype html>
<html lang="de">
<head>
// Standard Head Tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ihr Slogan">
<meta name="keywords" content="Ihre Schlagwörter zur Website">
<meta name="robots" content="noindex,nofollow">
<meta name="author" content="Name des Authors">
<meta name="date" content="Letzte Aktualisierung der HTML Seite">
<title>Smooth Scrolling</title>
// CSS Datei einbinden
<link rel="stylesheet" type="text/css" href="style.css" />
// JavaScript Datei einbinden
<script type="text/javascript" src="javascript.js"></script>
// jQuery Laden
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
// jQuery Daei einbeinden
<script src="jscript.js"></script>
</head>
<body>
// DIV erstellen
<div id="page-wrap">
// Navigation
<h1 id="top">Smooth Page Scrolling</h1>
<ul>
// #two scrollt an a tag two
<li><a href="#two">Scroll to Section Two</a></li>
// #three scrollt an a tag three
<li><a href="#three">Scroll to Section Three</a></li>
</ul>

// a Tag one
<a name="one"></a>
<h2 id="one">Section One</h2>
<p>Inhalt Text<br>
um den Scroll Effekt zu sehen, muss hier etwas mehr Text eingefügt werden.</p>

// a Tag two
<a name="two"></a>
<h2 id="two">Section Two</h2>
// Button zurück auf Position top
<p><a href="#top">Top</a></p>
<p>Inhalt Text<br>
um den Scroll Effekt zu sehen, muss hier etwas mehr Text eingefügt werden.</p>

// a Tag three
<a name="three"></a>
<h2 id="three">Section Three</h2>
// Button zurück auf Position top
<p><a href="#top">Top</a></p>
<p>Inhalt Text<br>
um den Scroll Effekt zu sehen, muss hier etwas mehr Text eingefügt werden.</p>
</div>
</body>
</html>

CSS Datei:
// Alle Abstände auf 0 setzen
*{
margin: 0;
padding: 0;
}
// Einstellungen für Schrift
body{
font-size: 14px;
font-family: Georgia, serif;
}
// DIV page-warp einstellen
#page-wrap{
max-width: 500px;
margin: 1em auto;
padding: 1em;
}
// Einstellung für H1 und H2
h1, h2{
line-height: 1.2em;
}
// Einstellung für P UL H1
p, ul, h1{
margin: 0 0 1em 0;
}

JavaScript Datei:
// Javascript für den Smooth Scroller
// Scroll Einstellungen
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});

jQuery Datei:
// jQuery für den Smooth Scroller
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});