Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta name="description" content="[anchorScroll]"/>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="ParentController">
  <!-- nav bar -->
  <div class="navbar">
    <select ng-model="anchor" 
     ng-options="anchor.name for anchor in anchors"
            ng-change="scroll(anchor)">
      <option value="">-- change anchor --</option>
    </select>
  </div>
  <div class="spacer"></div>
  <!--content-->
 <p>some dummy content at the top of the page</p>
  <p>foo bar baz</p> 
  
<span class="anchor" id="head1">head1</span>
<h5>This Headline is not obscured</h5>
​
<div style="height: 200px">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
​
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
​
​
<span class="anchor" id="head2">basfdasfd</span>
<h5>This Headline is also not obscured</h5>
​
<div style="height: 800px">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  
</body>
</html>
 
body {
  width:800px;
}
.navbar {
    position: fixed;
    top: 0px;
    height: 26px;
    width: 800px;
    background-color: rgba(0,0,0,0.6);
border: 1px solid rgba(0,0,0,0.3);
    padding: 14px;
}
.anchor {
   padding-top: 40px;
}
​
#head2 {
    height: 0px;
    width: 10px;
    border: 1px solid green;
    visibility: hidden;
}
​
#head1 {
    border: 1px solid green;
    visibility: hidden;
}
.spacer {
    height: 50px;
    clear: both;
}
 
angular.module('app',[])
  .controller('ParentController',function($scope, $anchorScroll, $location) {
    $scope.anchors = [
      { name: 'top', value: null },
      { name: 'head1', value: 'head1' },
      { name: 'head2', value: 'head2' }
    ];
  $scope.scroll = function(anchor) {
    $location.hash(anchor.value);
    $anchorScroll();
  }
 })
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ArielMashrakipro
0viewers