re-wrote hash scrolling
This commit is contained in:
parent
929cbc3ee0
commit
df3e107605
3 changed files with 21 additions and 4 deletions
|
@ -1,9 +1,20 @@
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var ProjectImages = require('./components/project-images');
|
var ProjectImages = require('./components/project-images');
|
||||||
|
|
||||||
window.scrollToElement = function(ident) {
|
$(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||||
$('html, body').animate({scrollTop: $(ident).offset().top}, 1000);
|
$('a[href*=#]:not([href=#])').click(function() {
|
||||||
}
|
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
|
||||||
|
var target = $(this.hash);
|
||||||
|
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
|
||||||
|
if (target.length) {
|
||||||
|
$('html,body').animate({
|
||||||
|
scrollTop: target.offset().top
|
||||||
|
}, 1000);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
$(window).load(function(){
|
$(window).load(function(){
|
||||||
$(window).trigger('scroll').trigger('resize');
|
$(window).trigger('scroll').trigger('resize');
|
||||||
|
|
|
@ -42,6 +42,12 @@ ol , ul{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.no-color-change {
|
||||||
|
color: inherit;
|
||||||
|
&:hover {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
/* @end Global */
|
/* @end Global */
|
||||||
|
|
||||||
/* @group Homepage */
|
/* @group Homepage */
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<img src="http://placehold.it/230x230"/>
|
<img src="http://placehold.it/230x230"/>
|
||||||
<h1>Hello, world!</h1>
|
<h1>Hello, world!</h1>
|
||||||
<p>Some random subtitle</p>
|
<p>Some random subtitle</p>
|
||||||
<p><i onClick="scrollToElement('#intro-text')" class="icon ion-chevron-down"></i></p>
|
<p><a href="#intro-text" class="no-color-change"><i class="icon ion-chevron-down"></i></a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container-fluid" id="intro-text">
|
<div class="container-fluid" id="intro-text">
|
||||||
|
|
Reference in a new issue