Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Wednesday, February 15, 2017

Page Jumps with Anchor Links #

If you want to create page jumps with anchor link code, you will need these two elements:
- The link
- The target

Example:
- Create the Link:
<a name="youlinktext">yourlinktext</a>

and link to the Target:
<a href="#yourlinktext">go to your link text</a>

- Link to div tag with id:
<div id="#yourlinkname">

- Linking to the Top of the Page:
Add the “target code” at the very top of your page:
<a name="toppage"></a>

And then put the following link code at the bottom of the page with "#"
<a href="#toppage">Top</a>

- Link to different page
<a href="../yourURL/#yourlinkname">Go To Next Page</a>

To get Smooth Page Scroll Effect, you may put the following jquery code right before body tag:

<!-- Start SMOOTH PAGE SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End SMOOTH PAGE SCROLL -->

Credit: Jquery code snippets by Chris Coyier and here is example on codepen:  http://codepen.io/chriscoyier/pen/dpBMVP


Restricted Access to the website with http basic authentication for additional security layer

Restricted Access to the website with http basic authentication for additional security layer ############## #For Nginx Server #########...