https://davhotel.com/tags/scrollArrow.tag

1<scrollArrow>
2	<a href="#"
3		class="scrollTo"
4		id="scroll-down">
5		<svg xmlns="http://www.w3.org/2000/svg"
6			viewBox="0 0 16.78 9.09">
7			<path d="M.13.76C.14.33.69-.07 1 .23c.14.13.29.24.42.38Q4.82 4 8.2 7.38c.18.18.27.16.44 0Q12.1 3.89 15.58.43c.19-.18.38-.4.68-.26a.6.6 0 0 1 .17 1l-3.17 3.21L9 8.68a.65.65 0 0 1-1.07 0c-2.52-2.47-5-4.94-7.47-7.43A2.8 2.8 0 0 1 .13.76z" />
8		</svg>
9	</a>
10
11	<script>
12
13		var self = this;
14
15		this.on('mount', function () {
16
17			$(document).ready(function () {
18
19				$('.scrollTo').on('click', function () {
20
21					$("html,body").animate({ scrollTop: $(window).height() }, 500);
22					return false;
23				});
24
25			});
26
27		});
28
29	</script>
30
31	<style>
32		#scroll-down {
33
34			display: block;
35			position: absolute;
36			bottom: 20px;
37			left: calc(50% - 30px);
38			animation: bounced 2s infinite;
39			z-index: 100;
40			transform-origin: left bottom 0;
41
42		}
43
44		#scroll-down svg {
45			width: 60px;
46			height: 30px;
47			fill: #fff;
48		}
49
50		@keyframes bounced {
51			8% {
52				transform: translate(0, -5px) scaleY(0.8);
53			}
54
55			25% {
56				transform: translate(0, -10px) scaleY(1.1);
57			}
58
59			40% {
60				transform: translate(0, 0) scaleY(0.9);
61			}
62
63			50% {
64				transform: translate(0, 0) scaleY(1.05);
65			}
66
67			60% {
68				transform: translate(0, 0) scaleY(1);
69
70			}
71
72			100% {
73				opacity: 1;
74				transform: translate(0, 0);
75			}
76
77		}
78	</style>
79</scrollArrow>