Um im beliebigen Text einer Websiteseite eine Sprungmarke als Ziel zu platzieren, gilt es wie folgt vorzugehen.
Schritt 1:
SP - > Einstellungen -> Seite hinzufügen
Schritt 2:
Den Text mit beliebigen Inhalten versehen
Schritt 3:
An gewünschten Positionen Sprungmarken einbauen
Im Bearbeitungsmodus der Seite, werden über das Menüband Einfügen -> Code einbetten so viele Marken gesetzt wie erforderlich.
Diese Stellen bekommen folgenden Code eingefügt
Der Text, wie im vorliegenden Beispiel „MeinLink“ navigiert uns zu der gewünschten Stelle.
Schritt 4:
Die Auslöser für die Links müssen sich noch im Text befinden, um springen zu können.
In meinem Beispiel sind es die quadratischen Kacheln.
Den Code dazu gibt es noch anbei, abschließend nach der Beschreibung.
Der HTML Code wird dabei in ein Skript-Editor Webpart eingefügt, Einfügen -> Webpart -> Medien und Inhalt -> Skript-Editor
In Abhängigkeit davon, über welche Kachel welcher Link als Sprungmarke angezeigt werden soll, müssen diese Links mit den kacheln verknüpft werden.
Entscheidend sind die im nachfolgenden gekennzeichneten Stellen zu den Links
Schritt 5:
Seite inkl. Aller Webparts speichern.
HTML Code für die Kacheln
<html>
<head>
<title>Test</title>
<style type="text/css">
#body {
font-family: Arial;
}
.li {
display: inline;
}
.a {
display: inline-block;
width: 160px;
height: 160px;
background-color: gray;
position: relative;
/*background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');*/
background-position: top left;
text-decoration: none;
color: #ffffff;
text-align: center;
}
.a > span {
/*height: 10%;*/
position: absolute;
bottom: 0;
display: block;
width: 100%;
background-color: rgba(64, 64, 64, 0.5);
transition: all ease-in 0.3s;
text-align: center;
height: 2.5em;
ine-height: 2.5em;
}
.a:hover > span {
height: 100%;
}
#a1{
background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');
background-color: red;
}
#a2{
background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');
background-color: blue;
}
#a3{
background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');
background-color: green;
}
#a4{
background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');
background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li class="li"><a href="http://www.google.de"><span id="a1" class="a"><span>Google</span></span></a></li>
<li class="li"><a href="#MeinLink"><span id="a2" class="a"><span>Lorem ipsum dolor</span></span></a></li>
<li class="li"><a href="#MeinLink2"><span id="a3" class="a"><span>Lorem ipsum dolor</span></span></a></li>
<li class="li"><a href="#"><span id="a4" class="a"><span>Lorem ipsum dolor</span></span></a></li>
</ul>
</div>
</body>
</html>
Fertig