Ich habe langsam wirklich alles versucht was mir eingefallen ist, aber ich schaffe es einfach nicht, meine Webseite so zu erstellen, dass sie sich immer an die entsprechende Bildschirauflösung anpasst. Ich möchte das genau so wie es z. B. bei dieser Webseite ist:
Egal wie groß bzw. klein der Bildschirm ist, sie wird immer passend angezeigt.
Wie macht man so etwas???
Vielen Dank erstmal für den Tipp!
Nun funktioniert zwar das langsame runterscrollen, jedoch nur wenn ich den Link zum Anker am Rand Positioniere (ab einer bestimmten Linie erkennt er die Verlinkung nicht mehr :() Hat das was mit diesem "Margin" zu tun?
Hier mal der Code für eine kleine Testseite (also quasi nur die Problemseite mit dem Anker):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="generator" content="Serif WebPlus X7 (15,0,2,31)">
<meta name="viewport" content="width=960">
<!-- jQuery enbinden von Google-->
<script type="text/javascript" src="http://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>
<a href="#Position1"><img src="wpimages/wp09d25823_06.png" style="position:absolute;left:73px;top:163px;width:227px;height:61px; <map id="map1" name="map1"><area shape="poly" coords="247,57,203,0,0,156,44,213" alt=""><usemap="#map1" </map>
<map id="map1" name="map1"><area shape="poly" coords="247,57,203,0,0,156,44,213" href="#Position1" alt=""></map>
</a>
<link rel="stylesheet" type="text/css" href="wpscripts/wpstyles.css">
<style type="text/css">
</style>
</head>
<body style="height:1000px;background:#ffffff;">
<div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:960px;height:1000px;">
<!-- Künstlerischer Text Position 1 art_1 -->
<map id="map1" name="map1"><area shape="rect" coords="0,0,228,62" href="#Position1" alt=""></map>
<img alt="Position1" usemap="#map1" src="wpimages/wp09d25823_06.png" style="position:absolute;left:73px;top:163px;width:227px;height:61px;">
<!-- Künstlerischer Text Formel 1 formel1 -->
<img alt="Position1" src="wpimages/wp1505964c_06.png" id="Position1" style="position:absolute;left:73px;top:887px;width:265px;height:73px;">
</div>
</body>
</html>Guten Abend Zusammen,
ich würde gerne auf meine Webseite das sogenannte Smooth Scroll haben. (langsames scollen von Ankern).
Leider funktioniert das ganze irgendwie nicht so richtig und ich weiß nicht an was das ganze liegt...
Hier mal ein Beispiel: http://unfold.no/#/people
ich benutze folgenden Code:
<!-- jQuery enbinden von Google-->
<script type="text/javascript" src="http://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>
Eigl. müsste jetzt doch jeder Anker auf der Webseite langsam runterscollen....dies tun sie alledings nicht. Ich weiß langsam echt nichtmehr was ich och machen könnte -.-
Ich bitte um eure Hilfe! 