Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Adding a Scroll to the Top Button to the website #647

Closed
smty2018 opened this issue Oct 12, 2023 · 5 comments · Fixed by #653
Closed

Adding a Scroll to the Top Button to the website #647

smty2018 opened this issue Oct 12, 2023 · 5 comments · Fixed by #653

Comments

@smty2018
Copy link

Want to add a scroll to the top button for better UX

@jmhobbs
Copy link
Owner

jmhobbs commented Oct 13, 2023

Sounds good to me!

@JaySable82
Copy link

can i solve this issue?? Please assign it to me....

1 similar comment
@RAJNIKANT1021
Copy link

can i solve this issue?? Please assign it to me....

@Sahil-Sharma06
Copy link

Please assign this task to me @smty2018

@katarisreelasya
Copy link

please assign me this issue i can do it...here is the sample code

<title>Simple Calculator</title> <style> #scrollUpBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 50%; } </style> <script> function add() { var operand1 = parseFloat(document.getElementById('operand1').value); var operand2 = parseFloat(document.getElementById('operand2').value); document.getElementById('result').value = operand1 + operand2; }
    function subtract() {
        var operand1 = parseFloat(document.getElementById('operand1').value);
        var operand2 = parseFloat(document.getElementById('operand2').value);
        document.getElementById('result').value = operand1 - operand2;
    }

    function multiply() {
        var operand1 = parseFloat(document.getElementById('operand1').value);
        var operand2 = parseFloat(document.getElementById('operand2').value);
        document.getElementById('result').value = operand1 * operand2;
    }

    function divide() {
        var operand1 = parseFloat(document.getElementById('operand1').value);
        var operand2 = parseFloat(document.getElementById('operand2').value);
        if (operand2 === 0) {
            document.getElementById('result').value = "Cannot divide by zero";
        } else {
            document.getElementById('result').value = operand1 / operand2;
        }
    }

    window.onscroll = function () { scrollFunction() };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("scrollUpBtn").style.display = "block";
        } else {
            document.getElementById("scrollUpBtn").style.display = "none";
        }
    }

    function scrollToTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

Simple Calculator





Add Subtract Multiply Divide

<button onclick="scrollToTop()" id="scrollUpBtn" title="Go to top">^</button>

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants