I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the steps outlined in the tutorial, it seems that something went wrong as the functionality is not working as intended.
Below is the code snippet:
$().ready(function() {
var $scrollingDiv = $(".floatBtn");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});.floatBtn{
position: absolute;
float: right;
right: 0;
text-align: right;
z-index: 5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, an has dicat aperiri delicata, te maiorum omittantur theophrastus vim, ut quot sapientem reprehendunt eam. Exerci omnium eu eum, legendos explicari sed ad. Apeirian mandamus vix et. Tollit dolorem has at, mod...lorem labore consequuntur sea, ne debet sententiae constituam pri.
Utamur adipisci sadipscing has ex. Tantas voluptatibus ius ei, vel definiebas signiferumque at. Lorem voluptaria te vel, cum ne consequuntur necessitatibus. Ex suas probo propriae cum. Duo ullum abhorreant dissentiet no. Fuisset consequat vim no.
...
Atqui invenire vim in, no usu possim tractatos principes. Invidunt probatus est te, eos ea error sententiae, id alterum nostrum sea. Mollis moderatius omittantur has ex, falli movet te has. At viris commodo deserunt quo.
Eu tale putent referrentur vix, cu quo admodum voluptatum appellantur. Usu ne ignota prodesset, ipsum quando an eos, dolores abhorreant an quo. Cu assum consequat ius, lobortis consequat eos no, ne mea suas congue viderer. Semper latine eripuit in quo. Vel...In the scroll function, when scrolling down, the floating button also scrolls further down instead of staying within the viewing area, which is not the desired behavior. Any help or suggestions would be greatly appreciated. Thank you in advance!