diff --git a/backend/static/js/chords.js b/backend/static/js/chords.js
index df0f219..63b42f0 100644
--- a/backend/static/js/chords.js
+++ b/backend/static/js/chords.js
@@ -23,13 +23,48 @@ function transpose(event, object, id) {
 }
 
 function collapsible(element, id) {
-    const collapsible = $('#' + id);
+    $(".song:visible").slideUp()
+    $('#' + id).slideToggle()
+}
+
+function isElementInViewPort(element) {
+    let rect = element.getBoundingClientRect();
+    // get the height of the window
+    let viewPortBottom = window.innerHeight || document.documentElement.clientHeight;
+    // get the width of the window
+    let viewPortRight = window.innerWidth || document.documentElement.clientWidth;
+
+    let isTopInViewPort = rect.top >= 0,
+     isLeftInViewPort = rect.left >= 0,
+     isBottomInViewPort = rect.bottom <= viewPortBottom,
+     isRightInViewPort = rect.right <= viewPortRight;
+
+    // check if element is completely visible inside the viewport
+     return (isTopInViewPort && isLeftInViewPort && isBottomInViewPort && isRightInViewPort);
+
+}
 
-    if (collapsible.hasClass('unrolled') === true) {
-        collapsible.slideUp();
-    } else {
-        collapsible.slideDown();
+function betterScrollDown() {
+    let children = $(".song:visible p ")
+    if (children.length === 0)
+        return
+
+    let scrollTo = null;
+    for (let i = 0; i < children.length - 1; i++) {
+        if (isElementInViewPort(children[i])) {
+            scrollTo = children[i+1]
+            console.log(i+1)
+            break
+        }
     }
-    collapsible.toggleClass("unrolled");
-    element.classList.toggle("unrolled");
+
+    let last_visible = isElementInViewPort(children[children.length - 1])
+
+    if (scrollTo !== null && !last_visible) {
+        console.log(scrollTo.getBoundingClientRect().top)
+        $('body,html').animate({
+            scrollTop: `+=${0.8 * scrollTo.getBoundingClientRect().top}`,
+        }, 800);
+    }
+
 }
\ No newline at end of file
diff --git a/backend/templates/songs/index.html b/backend/templates/songs/index.html
index 62a1bcf..31dc6e9 100644
--- a/backend/templates/songs/index.html
+++ b/backend/templates/songs/index.html
@@ -49,7 +49,7 @@ <h6 class="d-inline" ><%:author%></h6>
             {%  endif %}
             </span>
         </div>
-        <div id="<%:number%>" style="display: none;">
+        <div id="<%:number%>" class="song" style="display: none;">
             <div class="input-group mb-3">
                 <%if link%>
                     <a href="<%:link%>" class="btn btn-primary" role="button" aria-pressed="true">
@@ -161,11 +161,7 @@ <h6 class="d-inline" ><%:author%></h6>
         });
 
         $( "#scroll-down" ).click(function() {
-            const scrollAmount = (typeof window.outerHeight != 'undefined') ? Math.max(window.outerHeight, $(window).height()):$(window).height()
-            console.log(scrollAmount)
-            $('html, body').animate({
-                scrollTop: `+=${0.8 * scrollAmount}`
-             }, 800);
+            betterScrollDown()
         });
 
         let hidden = false