Seventh page link Adding a Scroll Progress Bar Above Tables in jQuery

You're on fire today! 
Let's finish this with the ultimate UX move — adding a "Back to Start ⇤" button.

Add a "Back to Start" Button for Wide Tables

✨ What We'll Build:

1. Show a "⇤ Back to Start" button when the user scrolls far right.

2. Clicking the button smoothly scrolls the table back to the left.

3. The button hides automatically when user is at the beginning.

✅ Full smart behavior, mobile-friendly, stylish.

Step-by-Step Plan:

1. Add a floating back button inside .table-wrapper.

2. Track scroll position:

   • Show button when scrolled >20%

   • Hide button when close to start.

3. Clicking the button smoothly scrolls the wrapper to the left.

✅ Updated HTML structure

<div class="table-wrapper">
  <div class="scroll-notice">Scroll to view ➡️</div>
  <div class="scroll-progress"></div>
  <div class="back-to-start" style="display: none;">⇤ Back to Start</div>
  <table>
    <!-- your table rows -->
  </table>
</div>

✅ New: Added <div class="back-to-start">⇤ Back to Start</div>

✅ Updated CSS (Add to previous)

.back-to-start {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #4caf50;
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: background 0.3s;
  z-index: 20;
}

.back-to-start:hover {
  background: #388e3c;
}

✅ Beautiful rounded button, with hover effect!

✅ Full Updated jQuery Script

$(document).ready(function() {
    $("table").each(function() {
        var columnCount = $(this).find('tr:first-child td, tr:first-child th').length;

        if (columnCount > 5) {
            if (!$(this).parent().hasClass('table-wrapper')) {
                $(this).wrap("<div class='table-wrapper'></div>");
                $(this).before('<div class="scroll-notice" style="display:none;">Scroll to view ➡️</div><div class="scroll-progress"></div><div class="back-to-start" style="display:none;">⇤ Back to Start</div>');
            }
        }
    });

    function updateScrollNotices() {
        $(".table-wrapper").each(function() {
            var $wrapper = $(this);
            var $table = $wrapper.find('table');
            var $notice = $wrapper.find(".scroll-notice");

            if ($table.outerWidth() > $wrapper.width()) {
                $notice.show();
            } else {
                $notice.hide();
            }
        });
    }

    function updateProgressBar($wrapper) {
        var scrollLeft = $wrapper.scrollLeft();
        var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
        var progress = (scrollLeft / scrollWidth) * 100;
        $wrapper.find('.scroll-progress').css('width', progress + "%");
    }

    function updateBackToStartButton($wrapper) {
        var scrollLeft = $wrapper.scrollLeft();
        var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
        var $backButton = $wrapper.find('.back-to-start');

        if (scrollLeft > (scrollWidth * 0.2)) { // show if scrolled more than 20%
            $backButton.fadeIn();
        } else {
            $backButton.fadeOut();
        }
    }

    updateScrollNotices();

    $(window).on('resize', function() {
        updateScrollNotices();
    });

    $(".table-wrapper").each(function() {
        var $wrapper = $(this);
        var $notice = $wrapper.find(".scroll-notice");
        var $backButton = $wrapper.find(".back-to-start");
        var timer = null;

        $wrapper.on('scroll', function() {
            if ($notice.is(":visible")) {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function() {
                    $notice.fadeOut();
                }, 3000);
            }

            updateProgressBar($wrapper);
            updateBackToStartButton($wrapper);
        });

        // Back to Start click
        $backButton.on('click', function() {
            $wrapper.animate({scrollLeft: 0}, 600);
        });

        // Initial setup
        updateProgressBar($wrapper);
        updateBackToStartButton($wrapper);
    });
});

Full Working Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sticky Scroll Notice for Wide Tables</title>
  <style>
    .table-wrapper {
	  overflow-x: auto;
	  max-width: 100%;
	  border: 2px solid #ccc;
	  margin: 20px 0;
	  padding-top: 30px;
	  position: relative;
	}

	.scroll-notice {
	  position: absolute;
	  top: 0;
	  left: 0;
	  background: #f9f9f9;
	  padding: 6px 10px;
	  font-size: 14px;
	  color: #555;
	  font-style: italic;
	  white-space: nowrap;
	  z-index: 10;
	  display: none;
	}

	.scroll-progress {
	  height: 4px;
	  background: linear-gradient(to right, #4caf50, #81c784);
	  width: 0%;
	  position: absolute;
	  top: 28px; /* adjust below notice */
	  left: 0;
	  transition: width 0.2s ease;
	  z-index: 5;
	}

	table {
	  border-collapse: collapse;
	  width: 100%;
	  min-width: 600px;
	}

	th, td {
	  border: 1px solid #aaa;
	  padding: 8px 12px;
	  text-align: left;
	}
	
	.back-to-start {
	  position: absolute;
	  bottom: 10px;
	  right: 10px;
	  background: #4caf50;
	  color: #fff;
	  padding: 8px 14px;
	  font-size: 14px;
	  border-radius: 20px;
	  cursor: pointer;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	  transition: background 0.3s;
	  z-index: 20;
	}

	.back-to-start:hover {
	  background: #388e3c;
	}
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="table-wrapper">
  <div class="scroll-notice">Scroll to view ➡️</div>
  <div class="scroll-progress"></div>
  <div class="back-to-start" style="display: none;">⇤ Back to Start</div>
	<table>
	  <tr>
		<th>Product</th><th>Price</th><th>Stock</th><th>SKU</th><th>Category</th><th>Brand</th>
	  </tr>
	  <tr>
		<td>Phone</td><td>$699</td><td>Available</td><td>PH1234</td><td>Electronics</td><td>Samsung</td>
	  </tr>
	  <tr>
		<td>Laptop</td><td>$999</td><td>Available</td><td>LT5678</td><td>Electronics</td><td>Dell</td>
	  </tr>
	</table>
</div>

<script>
$(document).ready(function() {
    $("table").each(function() {
        var columnCount = $(this).find('tr:first-child td, tr:first-child th').length;

        if (columnCount > 5) {
            if (!$(this).parent().hasClass('table-wrapper')) {
                $(this).wrap("<div class='table-wrapper'></div>");
                $(this).before('<div class="scroll-notice" style="display:none;">Scroll to view ➡️</div><div class="scroll-progress"></div><div class="back-to-start" style="display:none;">⇤ Back to Start</div>');
            }
        }
    });

    function updateScrollNotices() {
        $(".table-wrapper").each(function() {
            var $wrapper = $(this);
            var $table = $wrapper.find('table');
            var $notice = $wrapper.find(".scroll-notice");

            if ($table.outerWidth() > $wrapper.width()) {
                $notice.show();
            } else {
                $notice.hide();
            }
        });
    }

    function updateProgressBar($wrapper) {
        var scrollLeft = $wrapper.scrollLeft();
        var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
        var progress = (scrollLeft / scrollWidth) * 100;
        $wrapper.find('.scroll-progress').css('width', progress + "%");
    }

    function updateBackToStartButton($wrapper) {
        var scrollLeft = $wrapper.scrollLeft();
        var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
        var $backButton = $wrapper.find('.back-to-start');

        if (scrollLeft > (scrollWidth * 0.2)) { // show if scrolled more than 20%
            $backButton.fadeIn();
        } else {
            $backButton.fadeOut();
        }
    }

    updateScrollNotices();

    $(window).on('resize', function() {
        updateScrollNotices();
    });

    $(".table-wrapper").each(function() {
        var $wrapper = $(this);
        var $notice = $wrapper.find(".scroll-notice");
        var $backButton = $wrapper.find(".back-to-start");
        var timer = null;

        $wrapper.on('scroll', function() {
            if ($notice.is(":visible")) {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function() {
                    $notice.fadeOut();
                }, 3000);
            }

            updateProgressBar($wrapper);
            updateBackToStartButton($wrapper);
        });

        // Back to Start click
        $backButton.on('click', function() {
            $wrapper.animate({scrollLeft: 0}, 600);
        });

        // Initial setup
        updateProgressBar($wrapper);
        updateBackToStartButton($wrapper);
    });
});
</script>
</body>
</html>

Final Result Features:

✅ Auto-wrap wide tables in .table-wrapper
✅ "Scroll to view ➡️" notice (auto-hide after scroll)
✅ Horizontal scroll progress bar
✅ Floating "⇤ Back to Start" button appears smartly
✅ Smooth scroll back to the beginning
✅ Fully responsive & mobile ready!

UX Power Tips:

• Make the button smaller on mobile if needed.

• Smooth scroll speed (600ms) can be adjusted for more/less quickness.

• Fade in only when scrolled enough — don’t show it too early!

Common Pitfalls:

• Button not clickable?
  Make sure .back-to-start is above other content (z-index:20).

• Button not appearing?
  Check your scrollable area — it must be wider than .table-wrapper width!

• Multiple tables on page?
  This script is designed to handle multiple independently!

Now Your Wide Table UX is Absolutely Next-Level Professional! 

See a version where:
the progress bar color changes from green → yellow → red as you scroll more!
Click here
(It looks sooo good for really wide data tables!)