Need a bit of Javascript help, please?

Started by Grammy, June 30, 2016, 08:48:18 AM

Previous topic - Next topic

Grammy

I like some of the "Go up top" type mods I've found here, but the problem with them has been that they change the browser URL by adding a "#" or "top" or anything like that.  This wreaks havoc with some other Javascript events I have that won't function if the browser URL has been changed.  So I've tinkered around and come up with something that works, without changing the URL, but I'd just like it to be a bit... well...  smoother, I guess. 

2.0.11 default, here's what I have in my index.template.php:

echo '
<script>
function scrollWindow()
  {
  var top = document.getElementById(\'goHere\').scrollTop;
  window.scrollTo(0, top);
  }
</script>
</head>
<body><div id="goHere"></div>';
}


(I didn't want the body to take on the ID, so I just created a DIV up top with the ID "goHere".)

Then, near the bottom:

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '

<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://mydomain.com/forum/Themes/default/images/26.png" alt="" />

<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '
</ul>
</div>';
}

?>


The button's CSS class is "goTop".  I've attached a screenshot of the actual button's location.

This actually works, with no errors.  It doesn't change the URL of my forum, so that it doesn't interfere with other Javascript events.  My question is this:

Is there a way to make clicking the button actually scroll to the top (smoothly) rather than abruptly jump to the top?  Would that require calling for external Jquery, or can it be done by editing what I have?  (I really like the fact that so far, there are minimum edits, involving only one file.)

I did try offsetTop instead of scrollTop in the JS, but it didn't seem to make a difference.  Perhaps the input value "Scroll" is the issue?

Thanks for any help!   :)

Grammy

Okay, I've spend all day on it. I've removed the script from the head section and, instead, am now working with this, just before the closing body tag:


echo '
<script>
(function(){
  gotop.addEventListener("click",scrollWindow);
  function scrollWindow(){   
    window.scrollTo(0, document.body.scrollTop - 1);
    if(document.body.scrollTop > 0)
       setTimeout(scrollWindow,0)
};
})();
</script>
</body></html>';
}


And edited the input just a bit:

<input id=gotop type="image"  value="Scroll" class="goTop" src="http://mydomain.com/forum/images/26.png" alt="" />

I lost the div ID; it's finding the top without it.

It now scrolls smoothly.  But it's   v  e  r  y       v  e  r  y        S    L     O     W ........   :D

Can someone give me a push?  I just need to get my speed up in that bit of script. 


Grammy

#2
Sorted!

echo '
<script>
(function(){
  gotop.addEventListener("click",scrollWindow);
  function scrollWindow(){ 
var speed = 1;
var start = document.body.scrollTop;
(function doit(){
      window.scrollTo(0, document.body.scrollTop - speed);
      if(document.body.scrollTop > start/2){
   speed = speed * 1.02;
          setTimeout(doit,0); 
  }else{
   if(speed / 1.02 > 1 && document.body.scrollTop > 0)speed = speed / 1.01;
          if(document.body.scrollTop > 0)setTimeout(doit,0);   
  }
})();
};
})();
</script>
</body></html>';
}


(Plus, I moved the input button's location; it was outside the closing body tag before.  Um....  no.)


Why, thank you, Grammy!   ;D

Shambles

Quote from: Grammy
Why, thank you, Grammy!   ;D

You're welcome :)

Grammy

Quote from: Shambles on July 01, 2016, 03:49:31 AM
Quote from: Grammy
Why, thank you, Grammy!   ;D

You're welcome :)



Wait 'til I figure out why it won't scroll in Firefox; I'm gonna send myself flowers!   :D

Grammy

Quote from: Grammy on July 01, 2016, 07:08:52 AM
Wait 'til I figure out why it won't scroll in Firefox; I'm gonna send myself flowers!   :D


Sorted:


echo '
<script>
    (function() {
        goTop.addEventListener("click",
            function(e) {
                var start = getTop(e.target);
                var half = start / 2;
                var speed = 1;
                doit();

                function doit() {
                    window.scrollTo(0, start -= speed);
                    if (start > half) {
                        speed = speed * 1.02;
                        setTimeout(doit, 0);
                    } else {
                        if (start > 0) {
                            speed = speed / 1.01;
                            setTimeout(doit, 0);
                        }
                    }
                }
            }
        )

        function getTop(o) {
            var top = 0;
            var parentNode = null;
            var offsetParent = o.offsetParent;
            var oO = o;
            var el = o;
            while (el.parentNode != null) {
                el = el.parentNode;
                if (el.offsetParent != null && el.scrollTop && el.scrollTop > 0) top -= el.scrollTop;
                if (el == offsetParent) {
                    top += o.offsetTop;
                    if (el.clientTop && el.nodeName != "TABLE") top += el.clientTop;
                    o = el;
                    if (o.offsetParent == null && o.offsetTop) top += o.offsetTop;
                    offsetParent = o.offsetParent;
                }
            }
            return top - window.innerHeight + oO.offsetHeight;
        }
    })();
</script>
</body></html>';
}


Bloated, and the speed is just a tad slower in FF than Chrome, but, dang it, it works!  *calling the florist*    ;)

Advertisement: