Hello! I have put together a game of rock, paper, scissors. When loaded up you are presented with three different buttons, one for rock, one for paper, and one for scissors. When you press one of the buttons it will return a message indicating the outcome. If you press it again, it will put the new outcome underneath the old one and so on. When the outcomes get to the bottom of the page and you play again, it doesn't show the outcome and you have to scroll down to see it. Is there anyway to have the code automatically scroll while keeping the three buttons on the top? Here is the code:
HTML Code:
<!doctype html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script>
	function play(userChoice) {
		$("#game").append("<br>");
		var computerChoice = Math.random();
		if(computerChoice < 0.34) {
			computerChoice = "rock";
		} else if(computerChoice <= 0.67) {
			computerChoice = "paper";
		} else {
			computerChoice = "scissors";
		}

		$("#game").append(compare(userChoice, computerChoice)+"<br>");
	}

	var compare = function(choice1, choice2) {
		choice1 = choice1.toLowerCase();
		choice2 = choice2.toLowerCase();
		if(choice1 === choice2) {
			return "Stop picking what the computer picked!";
		} else if(choice1 === "rock") {
			if (choice2 === "scissors") {
				return "You win!";
			} else {
				return "You lost to a computer";
			}
		} else if(choice1 === "paper") {
			if (choice2 === "rock") {
				return "You win!";
			} else {
				return "You lost to a computer";
			}
		} else if(choice1 === "scissors") {
			if (choice2 === "rock") {
				return "You win!";
			} else {
				return "You lost to a computer";
			}
		}
		return "Why did you have to test my game like that?!?! Next time choose rock, paper, or scissors!!"
	};
	</script>
</head>
<body>
	<button onclick="play('rock')">Rock</button>
	<button onclick="play('paper')">Paper</button>
	<button onclick="play('scissors')">Scissors</button>
	<span></span>
</body>
</html>