asathoor/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Improved Smooth Scroll

The sample in this codepen hides the obvious.
If you want to use it, a variable in the function must be silenced, or rather commented out:
// var target = document.querySelector(".last");
If the line remains, the function will allways have .last as it's target ... (sic).
After this small revision you can use the function, like this:
// scroll til footer    
document.querySelector(".loremHop").addEventListener("click", function(e) {
    console.log('klik på: loremHop')
  e.preventDefault();
  smoothScroll(document.querySelector(".foot"), 500);
});

And now the smooth scroll functions works like a charm.

  
## gistfile1.txt
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>Example Title</title>
    <meta name="author" content="Your Name">
    <meta name="description" content="Example description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="">
    <link rel="icon" type="image/x-icon" href="" />
    <style>
        .container {
            height: 60vh;
            background-color: lightblue;
        }

        .container2 {
            height: 200vh;
            background-color: lightcoral;
        }
    </style>


</head>

<body>


    <div class="container">
        <a class="first" href="#">Bring me down</a>
        <div class="loremHop">Gå ned til lorem ipsum</div>
    </div>
    <div class="container2">
        <a class="last" href="#">Thanks</a>
    </div>
    <footer class="foot">
        <p class="footP"></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus minus esse vitae vel iure, laborum, porro error impedit sapiente! Recusandae suscipit esse laborum officia quo, deserunt possimus, et nesciunt exercitationem.</p>
    </footer>

<script>
function smoothScroll(target, duration) {
  // var target = document.querySelector(".last"); // vil altid hoppe til last
  var targetPosition = target.getBoundingClientRect().top;
  var startPosition = window.pageYOffset || window.scrollY;
  var distance = targetPosition - startPosition;
  var startTime = null;

  function loop(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(loop);
  }
  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }
  requestAnimationFrame(loop);
}

//Animating
document.querySelector(".first").addEventListener("click", function(e) {
    e.preventDefault();
    console.log('klik på first, gå til last ... prøver')
    smoothScroll(document.querySelector(".last"), 500);
});

//Animating Second Link
document.querySelector(".last").addEventListener("click", function(e) {
  e.preventDefault();
  smoothScroll(document.querySelector(".first"), 500);
});

// scroll til footer
document.querySelector(".loremHop").addEventListener("click", function(e) {
    console.log('klik på: loremHop')
  e.preventDefault();
  smoothScroll(document.querySelector(".foot"), 500);
});

</script>


</body>

</html>
	<!DOCTYPE html>
	<html lang="">

	<head>
	<meta charset="utf-8">
	<title>Example Title</title>
	<meta name="author" content="Your Name">
	<meta name="description" content="Example description">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="">
	<link rel="icon" type="image/x-icon" href="" />
	<style>
	.container {
	height: 60vh;
	background-color: lightblue;
	}

	.container2 {
	height: 200vh;
	background-color: lightcoral;
	}
	</style>



	</head>

	<body>


	<div class="container">
	<a class="first" href="#">Bring me down</a>
	<div class="loremHop">Gå ned til lorem ipsum</div>
	</div>
	<div class="container2">
	<a class="last" href="#">Thanks</a>
	</div>
	<footer class="foot">
	<p class="footP"></p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus minus esse vitae vel iure, laborum, porro error impedit sapiente! Recusandae suscipit esse laborum officia quo, deserunt possimus, et nesciunt exercitationem.</p>
	</footer>

	<script>
	function smoothScroll(target, duration) {
	// var target = document.querySelector(".last"); // vil altid hoppe til last
	var targetPosition = target.getBoundingClientRect().top;
	var startPosition = window.pageYOffset \|\| window.scrollY;
	var distance = targetPosition - startPosition;
	var startTime = null;

	function loop(currentTime) {
	if (startTime === null) startTime = currentTime;
	var timeElapsed = currentTime - startTime;
	var run = ease(timeElapsed, startPosition, distance, duration);
	window.scrollTo(0, run);
	if (timeElapsed < duration) requestAnimationFrame(loop);
	}
	function ease(t, b, c, d) {
	t /= d / 2;
	if (t < 1) return c / 2 * t * t + b;
	t--;
	return -c / 2 * (t * (t - 2) - 1) + b;
	}
	requestAnimationFrame(loop);
	}

	//Animating
	document.querySelector(".first").addEventListener("click", function(e) {
	e.preventDefault();
	console.log('klik på first, gå til last ... prøver')
	smoothScroll(document.querySelector(".last"), 500);
	});

	//Animating Second Link
	document.querySelector(".last").addEventListener("click", function(e) {
	e.preventDefault();
	smoothScroll(document.querySelector(".first"), 500);
	});

	// scroll til footer
	document.querySelector(".loremHop").addEventListener("click", function(e) {
	console.log('klik på: loremHop')
	e.preventDefault();
	smoothScroll(document.querySelector(".foot"), 500);
	});

	</script>


	</body>

	</html>