Add "go back to top" arrow #547
Conversation
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
Unnecessary empty lines.
arrow.png
Outdated
There was a problem hiding this comment.
I think we can also use something made in pure CSS. No need for an image. Something like this would work: https://codepen.io/tombruijn/pen/ExGqVdx
Also easier to color on hover for example.
index.html
Outdated
| @@ -29,6 +29,8 @@ <h2>Guides in other languages</h2> | |||
| </div> | |||
| </div> | |||
|
|
|||
| <button onclick="topFunction()" id="myBtn" title="Go to top"><img class="arrow-img" src="arrow.png" alt="" srcset=""></button> | |||
There was a problem hiding this comment.
| <button onclick="topFunction()" id="myBtn" title="Go to top"><img class="arrow-img" src="arrow.png" alt="" srcset=""></button> | |
| <button onclick="topFunction()" id="go-to-top-arrow" title="Go to top"><img class="arrow-img" src="arrow.png" alt="" srcset=""></button> |
This should have a more descriptive name than myBtn.
There was a problem hiding this comment.
Changes Done !
js/guides.js
Outdated
| document.body.scrollTop = 0; | ||
| document.documentElement.scrollTop = 0; |
There was a problem hiding this comment.
You can also use the scrollTo function: http://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Extra benefit: smooth scroll, so it's not a very sudden jump when you click the arrow.
| document.body.scrollTop = 0; | |
| document.documentElement.scrollTop = 0; | |
| window.scrollTo({ | |
| top: 0, | |
| left: 0, | |
| behavior: "smooth", | |
| }); |
There was a problem hiding this comment.
@tombruijn Thank You soo much for optimizing my code I got to learn a lot from you. i have done the changes
index.html
Outdated
| @@ -29,6 +29,8 @@ <h2>Guides in other languages</h2> | |||
| </div> | |||
| </div> | |||
|
|
|||
| <button onclick="topFunction()" id="myBtn" title="Go to top"><img class="arrow-img" src="arrow.png" alt="" srcset=""></button> | |||
There was a problem hiding this comment.
This location only makes it visible on the main page. Is it supposed to only be on the main page or every page?
There was a problem hiding this comment.
Yes it should be on every page. do I need to add this code manually on every page ?
|
Okay First of all thank you soo much @tombruijn for reviewing my code and taking out your precious time I have noted all the changes that you mentioned and I am on it. |
js/guides.js
Outdated
| }else{ | ||
| $(".go-to-top-arrow").removeClass("active"); | ||
| } | ||
| }) |
js/guides.js
Outdated
| }); | ||
| } | ||
|
|
||
| window.addEventListener("scroll", () => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
|
@tombruijn Hello just letting you know that I have done the mentioned changes by you and have also added some features like transition to enhance user experience please let me know if there is anything in which I can help out |
|
Thanks for the PR @VaibhavSharma24! I've merged it. |
Created the toggle button to move to top of the home screen issue #539