I am trying to move a fixed svg link up, if ScrollTop > 0. If the window is scrolled to the top, it shall go back down again. But for whatever reason it does go up, but not down. Here is a Snippet of my code:
$(window).scroll(function () {
if ($(window).scrollTop() > 0) {
$('svg').animate({bottom: "-60px"});
}else{
$('svg').animate({bottom: "-160px"});
}
});
body{
height: 2000px;
}
svg{
position: fixed;
bottom: -160px;
}
<script src="http://ift.tt/1oMJErh"></script>
<html>
<head>
<title>
</title>
</head>
<body>
<svg>
<a class="goUp" href="#">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<circle id="arrow_up" cx="35" cy="35" x="100" y="100" r="20" stroke="blue" style="left: 10px;" stroke-width="0" fill="#1257A0" filter="url(#f1)"/>
<line x1="25" stroke-linecap="round" y1="33" x2="35" y2="24" style="stroke:rgb(255,255,255);stroke-width:4" />
<line x1="45" stroke-linecap="round" y1="33" x2="35" y2="24" style="stroke:rgb(255,255,255);stroke-width:4" />
<line x1="35" stroke-linecap="round" y1="46" x2="35" y2="24" style="stroke:rgb(255,255,255);stroke-width:4" /></a>
</svg>
</body>
</html>
Thanks in advance!
Aucun commentaire:
Enregistrer un commentaire