Skip to content

Commit

Permalink
Added scroll-to-top button with smooth scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@RachitSahu26
RachitSahu26 committed Oct 16, 2024
1 parent a87987f commit df146e8
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 142 deletions.
6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"test": "mocha",
"build": "bin/build-site.js",
"serve": "http-server site/build/",
"start": "bin/serve-site.js"
"start": "bin/serve-site.js"




},
"nodemonConfig": {
"ext": "js,md,html,css",
Expand Down
327 changes: 186 additions & 141 deletions site/templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -1,150 +1,195 @@
<!DOCTYPE html>
<html lang="en" class="wf-active">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/assets/remoteintech.png" type="image/x-icon" />
<title>{% block pageTitle %}{% endblock %} &#8211; Remote In Tech</title>
{%- for stylesheet in stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ stylesheet.url }}" />
{%- endfor %}
{%- for src in inlineScripts %}
<script type="text/javascript">{{ src|safe }}</script>
{%- endfor %}
{%- for script in scripts %}
<script type="text/javascript" src="{{ script.url }}"></script>
{%- endfor %}
<script src="https://cdn.usefathom.com/script.js" data-site="KVRCNWLT" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body class="page no-sidebar custom-background">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<p class="site-title">
<a href="/">Remote In Tech</a>
</p>
<p class="site-description">
A list of semi to fully remote-friendly companies in tech
</p>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/assets/remoteintech.png" type="image/x-icon" />
<title>{% block pageTitle %}{% endblock %} &#8211; Remote In Tech</title>
{%- for stylesheet in stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ stylesheet.url }}" />
{%- endfor %}
{%- for src in inlineScripts %}
<script type="text/javascript">{ { src | safe } }</script>
{%- endfor %}
{%- for script in scripts %}
<script type="text/javascript" src="{{ script.url }}"></script>
{%- endfor %}
<script src="https://cdn.usefathom.com/script.js" data-site="KVRCNWLT" defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">


<meta name="theme-color" content="#ffffff">

<style>
#scrollToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
/* Initially hidden */
background-color: #bb4f5f;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}

#scrollToTopBtn:hover {
background-color: #45a049;
}
</style>
</head>

<body class="page no-sidebar custom-background">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<p class="site-title">
<a href="/">Remote In Tech </a>
</p>
<p class="site-description">
A list of semi to fully remote-friendly companies in tech
</p>
</div>

<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-primary-container">
<ul id="menu-primary" class="menu">
<li class="{% block listItemClasses %}menu-item{% endblock %}">
<a href="/">The List</a>
</li>
<li class="menu-item">
<a href="https://blog.remoteintech.company/">About</a>
</li>
<li class="menu-item">
<a href="https://blog.remoteintech.company/contact/">Contact</a>
</li>
<li class="menu-item">
<a href="https://blog.remoteintech.company/posts/">Blog</a>
</li>
</ul>
</div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->

<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-primary-container">
<ul id="menu-primary" class="menu">
<li class="{% block listItemClasses %}menu-item{% endblock %}">
<a href="/">The List</a>
</li>
<li class="menu-item">
<a href="https://blog.remoteintech.company/">About</a>
</li>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article class="page hentry">
<div class="entry-content">
{% block pageContent %}{% endblock %}
</div><!-- .entry-content -->
</article><!-- .page -->
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- #content -->

<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info-wrapper clear">

<button id="scrollToTopBtn">⬆️</button>




<nav class="jetpack-social-navigation jetpack-social-navigation-svg" role="navigation"
aria-label="Social Links Menu">
<div class="menu-social-links-container">
<ul id="menu-social-links" class="menu">
<li class="menu-item">
<a href="https://blog.remoteintech.company/contact/">Contact</a>
<a href="https://twitter.com/RemoteInTechCo">
<span class="screen-reader-text">
RemoteInTechCo Twitter
</span>
<svg class="icon icon-twitter" aria-hidden="true" role="img">
<use href="#icon-twitter" xlink:href="#icon-twitter"></use>
</svg>
</a>
</li>
<li class="menu-item">
<a href="https://blog.remoteintech.company/posts/">Blog</a>
<a href="https://github.com/remoteintech/remote-jobs">
<span class="screen-reader-text">
GitHub Repo
</span>
<svg class="icon icon-github" aria-hidden="true" role="img">
<use href="#icon-github" xlink:href="#icon-github"></use>
</svg>
</a>
</li>
</ul>
</div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->

<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article class="page hentry">
<div class="entry-content">
{% block pageContent %}{% endblock %}
</div><!-- .entry-content -->
</article><!-- .page -->
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- #content -->

<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info-wrapper clear">
<nav
class="jetpack-social-navigation jetpack-social-navigation-svg"
role="navigation"
aria-label="Social Links Menu"
>
<div class="menu-social-links-container">
<ul id="menu-social-links" class="menu">
<li class="menu-item">
<a href="https://twitter.com/RemoteInTechCo">
<span class="screen-reader-text">
RemoteInTechCo Twitter
</span>
<svg
class="icon icon-twitter"
aria-hidden="true"
role="img"
>
<use
href="#icon-twitter"
xlink:href="#icon-twitter"
></use>
</svg>
</a>
</li>
<li class="menu-item">
<a href="https://github.com/remoteintech/remote-jobs">
<span class="screen-reader-text">
GitHub Repo
</span>
<svg
class="icon icon-github"
aria-hidden="true"
role="img"
>
<use
href="#icon-github"
xlink:href="#icon-github"
></use>
</svg>
</a>
</li>
</ul>
</div><!-- .menu-social-links-container -->
</nav><!-- .jetpack-social-navigation -->
<div class="site-info">
Powered by
<a href="https://github.com/remoteintech/remote-jobs" target="_blank" rel="noopener noreferrer">
GitHub
</a>
and
<a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>
<span role="separator"></span>
<a href="{{ editUrl }}" target="_blank" rel="noopener noreferrer">
Edit this page on GitHub
</a>
</div><!-- .site-info -->
</div><!-- .site-info-wrapper -->
</footer><!-- #colophon -->
</div><!-- #page -->
<svg
style="position: absolute; width: 0; height: 0; overflow: hidden;"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<symbol id="icon-github" viewBox="0 0 24 24">
<path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833
c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"/>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 24 24">
<path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"/>
</symbol>
</defs>
</svg>
</body>
</html>
</div><!-- .menu-social-links-container -->
</nav><!-- .jetpack-social-navigation -->
<div class="site-info">
Powered by
<a href="https://github.com/remoteintech/remote-jobs" target="_blank" rel="noopener noreferrer">
GitHub
</a>
and
<a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>
<span role="separator"></span>
<a href="{{ editUrl }}" target="_blank" rel="noopener noreferrer">
Edit this page on GitHub
</a>
</div><!-- .site-info -->
</div><!-- .site-info-wrapper -->
</footer><!-- #colophon -->
</div><!-- #page -->






<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-github" viewBox="0 0 24 24">
<path
d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833
c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z" />
</symbol>
<symbol id="icon-twitter" viewBox="0 0 24 24">
<path
d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z" />
</symbol>
</defs>
</svg>





<script>
const scrollToTopBtn = document.getElementById('scrollToTopBtn');

// Show the button after scrolling 100px down
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
scrollToTopBtn.style.display = 'block';
} else {
scrollToTopBtn.style.display = 'none';
}
};

// Smooth scroll to the top when the button is clicked
scrollToTopBtn.onclick = function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};

</script>
</body>

</html>

0 comments on commit df146e8

Please sign in to comment.