Inner HTML a href Scroll Effect & Random section color with JQUERY

index.html

<div id="section1"><p>1</p><a href="#section4"  onclick="sectioncolor()">Go to 4</a></div>

<div id="section2"><p>2</p><a href="#section7" onclick="sectioncolor()">Go to 7</a></div>

<div id="section3"><p>3</p><a href="#section9" onclick="sectioncolor()">Go to 9</a></div>

<div id="section4"><p>4</p><a href="#section6" onclick="sectioncolor()">Go to 6</a></div>

<div id="section5"><p>5</p><a href="#section1" onclick="sectioncolor()">Go to 1</a></div>

<div id="section6"><p>6</p><a href="#section8" onclick="sectioncolor()">Go to 8</a></div>

<div id="section7"><p>7</p><a href="#section3" onclick="sectioncolor()">Go to 3</a></div>

<div id="section8"><p>8</p><a href="#section5" onclick="sectioncolor()">Go to 5</a></div>

<div id="section9"><p>9</p><a href="#section2" onclick="sectioncolor()">Go to 2</a></div>

inner-html-a-href-scroll-effect-random-section-color-with-jquery.markdown

Inner HTML a href Scroll Effect & Random section color with JQUERY

A Pen by HyDz on CodePen.

License.

script.js

function scrolleffect(){

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 700, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
}

function sectioncolor(i) {
  var i = 1;
  var color = "blue";
 rand();
 function rand(){
  if (i < 10){
  
 var x = Math.floor((Math.random() * 9) + 1); 
    if (x==1){color="#DEB887";}
    else if (x==2){color="#ADFF2F";}
    else if (x==3){color="#F0E68C";}
    else if (x==4){color="#C0C0C0";}
    else if (x==5){color="#DDA0DD";}
    else if (x==6){color="#008080";}
    else if (x==7){color="#FF8C00";}
    else if (x==8){color="#778899";}
    else if (x==9){color="#2E8B57";}
 elem=document.getElementById("section"+i).style.background = color;
     
   ++i;
   rand();
   }
   else {return;}
 }
 


}

scrolleffect();

sectioncolor();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$blue: #5cabe1;
$salmon: lighten(#ff3333, 6%);

body {
  text-justify: center;
  text-align: center;
}

[id*="section"] {
 
  margin-top: 0em;
  padding-top: 5em;
  padding-bottom: 5em;
  border-style: dotted;
  border-width: 0.5em;
  border-color: $blue;
  
}

a {
  margin-left: -10%;
  font-size: 4em;
  text-decoration: none;
  color: $salmon;
}
a:hover {
  margin-left: -10%;
  font-size: 4em;
  text-decoration: none;
  color: $blue;
}
p {
  float: left;
  margin-left: 10%;
  margin-top: 0;
  font-size: 3em;
  color: $blue;
}