Difference between revisions of "Team:William and Mary/RealMainPage"

Line 7: Line 7:
  
 
<script>
 
<script>
window.smoothScroll = function(target) {
+
$('a[href^="#"]').on('click', function(event) {
     var scrollContainer = target;
+
 
    do { //find scroll container
+
     var target = $(this.getAttribute('href'));
        scrollContainer = scrollContainer.parentNode;
+
 
        if (!scrollContainer) return;
+
     if( target.length ) {
        scrollContainer.scrollTop += 1;
+
         event.preventDefault();
    } while (scrollContainer.scrollTop == 0);
+
        $('html, body').stop().animate({
   
+
            scrollTop: target.offset().top
     var targetY = 0;
+
         }, 1000);
    do { //find the top of target relatively to the container
+
        if (target == scrollContainer) break;
+
         targetY += target.offsetTop;
+
    } while (target = target.offsetParent);
+
   
+
    scroll = function(c, a, b, i) {
+
        i++; if (i > 30) return;
+
        c.scrollTop = a + (b - a) / 30 * i;
+
         setTimeout(function(){ scroll(c, a, b, i); }, 20);
+
 
     }
 
     }
    // start scrolling
+
 
 +
});
 
    
 
    
  
Line 65: Line 57:
  
  
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))"><img src="https://static.igem.org/mediawiki/2017/8/8c/T--William_and_Mary--arrowright.jpeg" height = "80"/></button></div>
+
<a href="#bottom" id="top"><img src="https://static.igem.org/mediawiki/2017/8/8c/T--William_and_Mary--arrowright.jpeg" height = "80"/></a>
<div class="second" id="second">Hi</div>
+
 
 +
 
  
  
Line 82: Line 75:
 
<br/>
 
<br/>
  
 
 
<div id="middle">
 
 
<center>
 
<center>
<img src="https://static.igem.org/mediawiki/2017/d/de/T--William_and_Mary--greenyellowinfographic.jpeg" height = "2200"/>
+
<a href="#top" id="bottom"><img src="https://static.igem.org/mediawiki/2017/d/de/T--William_and_Mary--greenyellowinfographic.jpeg" height = "2200"/></a>
 
</center>
 
</center>
 
</div>
 
</div>

Revision as of 01:58, 2 October 2017



For more information, click here .