aditya/hugo-theme-introduction
1
0
Fork 0
mirror of https://git.adityakumar.xyz/hugo-theme-introduction.git synced 2024-11-09 23:09:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Lighter scroll function using jQuery. Updated back-to-top links on single and blog pages to fontawesome arrow.

Browse source
This commit is contained in:
Vicky 2017-04-20 11:06:33 +08:00
parent 7688b4550d
commit 4fed8557d8
4 changed files with 32 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
layouts/_default/list.html
View file

@ -43,7 +43,7 @@
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top">TOP</a>
<a href="{{ .Permalink }}#top"><i class="fa fa-arrow-up"></i></a>
<hr>
</div>
@ -51,20 +51,14 @@
</div><!-- End fade in two -->
</div><!-- End parent section -->
<!-- Cool scroll effect from this guy: https://gist.github.com/flesler/ -->
<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="application/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src={{ "js/init.js" | relURL }}></script>
<!-- Bitty scrolling links script -->
<script>
// Bind to the click of all links with a #hash in the href
$('a[href^="{{ .Permalink }}#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
$('a[href^="{{ .Permalink }}#"]').click(function(e) {
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:false});
});
</script>
var target = this.hash;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
return false;
})
</script>

26
layouts/blog/single.html
View file

@ -58,7 +58,7 @@
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top">TOP</a>
<a href="{{ .Permalink }}#top"><i class="fa fa-arrow-up"></i></a>
<hr>
</div>
@ -66,20 +66,14 @@
</div><!-- End fade in two -->
</div><!-- End parent section -->
<!-- Cool scroll effect from this guy: https://gist.github.com/flesler/ -->
<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="application/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src={{ "js/init.js" | relURL }}></script>
<!-- Bitty scrolling links script -->
<script>
// Bind to the click of all links with a #hash in the href
$('a[href^="{{ .Permalink }}#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
$('a[href^="{{ .Permalink }}#"]').click(function(e) {
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:false});
});
</script>
var target = this.hash;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
return false;
})
</script>

25
layouts/index.html
View file

@ -35,7 +35,6 @@
{{ if .Site.Params.showblog }}
<a class="nav-item" href="#blog">Blog</a>
{{ end }}
<a class="nav-item" href="#workwithme">Work With Me</a>
<a class="nav-item" href="#contact">Contact</a>
</nav>
<hr>
@ -120,20 +119,14 @@
</div><!-- End of fade in three section -->
<!-- Where all the awesome ends. Aww. -->
<!-- Cool scroll effect from this guy: https://gist.github.com/flesler/ -->
<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="application/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src={{ "js/init.js" | relURL }}></script>
<!-- Bitty scrolling links script -->
<script>
// Bind to the click of all links with a #hash in the href
$('a[href^="#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
$('a[href^="#"]').click(function(e) {
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:false});
});
</script>
var target = this.hash;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
return false;
})
</script>

7
layouts/partials/header.html
View file

@ -34,17 +34,16 @@
{{ end }}
<!-- CSS -->
{{ if .Site.Params.highlightjs }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{ end }}
<!-- Fonts and icon CSS -->
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<!-- Fonts and icon CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Ubuntu+Mono:400,400i,700,700i|Raleway:500|Work+Sans">