Hashtag Navigation Scrolling Tweaks Primer Tutorial
We’ve got what we hope is an interesting proof of concept web application for you today. What do you think of …
Hagtag navigation plus a Scrolling correction
… combining that …
- HTML #hashtag navigation eg. #t5 … combined with …
- Javascript location.hash detection of this plus any “double hashtagging” eg. #t5#andabit=-40 … combined with …
- Javascript document.getElementById(‘t5’).getBoundingClientRect().y usage within (external Javascript hashtag_and_a_bit.js) …
// hashtag_and_a_bit.js
// RJM Programming
// November, 2021
// Help out Hashtag Position Less a Bit
var firstlfh='';
var dgbiv='-40';
function lfh() {
if (1 == 1) {
var thish=('' + location.hash);
if (thish != firstlfh) {
firstlfh=thish;
if (firstlfh.split('#').length > 2) {
if (firstlfh.split('#andabit').length == 2) {
window.scroll(0, 0);
var rect=document.getElementById(firstlfh.split('#')[1].split('#')[0]).getBoundingClientRect();
if (('' + rect.top) != '') {
var newtop=eval(('' + rect.y));
newtop+=eval('' + dgbiv); //document.getElementById('i1').value);
window.scroll(0, newtop);
}
}
}
}
}
}
setInterval(lfh, 1000);
… to cover for those occasions where hashtag navigation misses the “true” mark you intended, as it is apt to do, in our experience? And in our experience a “small scrolling correction” can hit the “true” mark, it’s just that with today’s proof of concept hashtag_and_a_bit.html‘s web application it can be programmed for rather that being a second step occasionally requiring user intervention …
… for those users who hate “tweak scrolling”, we guess!
If this was interesting you may be interested in this too.
