WordPress update : Als sehr nützliches javascript snippet für Animierte jquery scroll navigation. Um Tweets zu Sub Seiten zu teilen oder zu twittern können wir nun die Blogurl + #Anker verwenden. Blogpost werden gerne etwas zu lange da sie oft ergänzt werden und eventuell als ganzes nicht von jedem gelesen werden. Um auf einen ausschnitt im blogpost sich beziehen zu können hilft dieses jquery animation.
Um einen Tweeten zu einem SubTitel zu tweeten benötigt man eine sub url zur unter headline des Artikels ein Anker IDs auf der Seite. In diesem Fall soll gleich nach dem laden der Seite auf die entsprechenden Refernze url hinunter gescrollt werden.
Somit wird es wesentlich interessanter mehrfache Tweets zu einem Thema zu den Sub header des selben Posts zu versenden.
Gleiche technik funktioniert natürlich auch für Facebook shares mit dem einen Nachteil das Sie nicht gezählt werden da FB Sie als neue Url sieht.
Markierung der Tweet Subtitel
Die jeweiligen sprungstellen werden mit IDs im WordPress html editor gekenzeichnet z.B
<a id=”zwei” > Hier ist der Untertitel <a>
Der Twitter link zum subtitel hat dan folgendes format https://www.MeinBlog.at/TITEL#zwei
Man kann natürlich beliebig viele subtitel als Sprung Adressen einbauen
Ein Beispiel hier am Blog für einen Tweet sprung die IDs sind mit ID=”eins” – fünf gekenzeichnet können beliebig gewählt werden.
Folgendes Script kommt in den wordpress <head>
// Scroll to ID position Ref: https://bit.ly/Resmmx
jQuery(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
jQuery('a').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find Top location of target
//var targetOffset = $target.offset().top;
var targetOffset = $target.offset().top - 140;
jQuery(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
jQuery(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments,
jQueryscrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
jQueryscrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
jQueryscrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
Parameter :
Scroll geschwindigtkeit :
// Animate to target hier auf 1000
Abstand vom oberen Bild rand :
// Find Top location of target -140 in diesem Beispiel
Inzwischen gibt es auch ein jquery Plugin SMOTH SCROLL Ariel Flesler’s
Ref: https://bit.ly/Resmmx by Karl Swedberg