scrollTop function ρύθμιση για smooth scroll

[hariC11]

Καλημέρα/ καλησπέρα παιδιά, είμαι φοιτητής και έχω ένα project, να κάνω μια ιστοσελίδα, συγκεκριμένα ένα εστιατόριο για την σχολή μου..

 

Δεν είμαι έμπειρος, τώρα μαθαίνω, πιστεύω έχω κάνει καλή δουλεία και ίσως η ερώτηση μου να είναι "silly" ή να είμαι κουρασμένος και να έχω μπερδευτεί μόνος μου..

 

Μετά από πολύ διάβασμα στο Stack Overflow και W3Schools(βασική πηγή πληροφοριών) έχω βρει - τροποποιήσει κάποιο κώδικα για scroll up, δηλαδή για το γνωστό κουμπάκι με το βελάκι!! 

Λειτουργεί κανονικά, απλά μου κάνει απότομα το scroll up. Το πρόβλημα μου λοιπόν είναι πως θα το κάνω smooth το scroll up (πχ βλέπετε την ιστοσελίδα του Πλαισίου το Top button)..

 

Προσπαθώ να βρω κώδικα, βρίσκω μόνο jQuery, που δεν έχω διδαχτεί ακόμα και μου είναι δυσανάγνωστο!

 

Σας παραθέτω τον κωδικά μου.. 

**Χρησιμοποιώ css αρχείο του Font-Awesome

 

HTML

<a onclick="topFunction()" id="myBtn"> <i style="font-size:15px" class="fa"></i> </a>

CSS

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color:  rgba(0, 0, 0, 0.5); 
    color: #B4B1B1; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 150px;
}

#myBtn:hover { background-color:  rgba(0, 0, 0, 0.5); }

JavaScript

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

//Scroll to top button
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0; // For Chrome
    document.documentElement.scrollTop = 0; // For IE and Firefox
}

[Oufis3]

Ο μόνος τρόπος για να το κάνεις είναι με jQuery. Εγώ αυτόν τον τρόπο γνωρίζω.

[egoeimai1]

Τσέκαρε εδώ http://iamdustan.com/smoothscroll/

[hariC11]

Βρέθηκε λύση, ευχαριστώ!!

[dominotrix]

Θα σε βοηθουσε να μπεις στο codepen.io και να κανεις μια απλη αναζητηση για smoothscroll ή scroll top.