Skip to content
This repository has been archived by the owner on May 6, 2024. It is now read-only.

Commit

Permalink
#767 Add return to top link
Browse files Browse the repository at this point in the history
  • Loading branch information
gchi25 committed May 1, 2023
1 parent 722edc7 commit 3444937
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions components/BetaUsaGovFooter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,16 @@
</div>
<!-- Footer social component. -->
<BetaUsaGovFooterSocial />
<div class="grid-container usa-footer__return-to-top">
<a
id="back-to-top"
href="#"
title="Top"
class="stuck"
@click.prevent="scrollToTop">
{{ $t("returnToTop") }}
</a>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -79,6 +89,34 @@ export default {
return defaultValue
}
},
scrollToTop() {
window.scrollTo(0, 0)
},
},
}
</script>

<style lang="scss" scoped>
#back-to-top {
position: fixed;
height: 50px;
width: 90px;
right: -100px;
bottom: 80px;
background: #e8f0f7;
transition: right .5s;
background-image: url("~/assets/img-custom/Icon_Back_to_Top_Blue.png");
background-size: 45px;
background-position: 2px;
background-repeat: no-repeat;
padding: 0 15px 0 50px;
border-radius: 25px 0 0 25px;
line-height: 50px;
display: inline-block;
text-align: center;
z-index: 1
}
#back-to-top.stuck {
right: 0
}
</style>

0 comments on commit 3444937

Please sign in to comment.