Skip to main content

One page Website with smooth scrolling and hide hash from url

One page Website

One page Website with smooth scrolling and hide hash from url

Css

<style>
html, body {
margin:0;
padding:0;
width:100%;
font-size:1em;
color:#ffffff;
}

#header {
height:80px;
background:#1240AB;
padding:20px;
border-bottom:3px solid #4671D5;
}

#subMenu {
height:50px;
width:inherit;
background:#6c8cd5;
display:none;
position:fixed;
top:0;
left:0;
z-index:500;
opacity:.9;
padding:15px;
}

#content {
margin:20px;
font-size:2.25em;
color:#232323;
height: 1000px;
}
#content h1 {
    font-size: 20px;
    margin: 0 auto;
    padding-top: 5%;
    text-align: center;
}

section {
    min-height: 100%;
}
.main {
    height: 100%;

}
li {
    color: #000;
    display: inline-block;
    font-size: 16px;
}
li a {color: #fff; text-decoration: none;}
</style>

javascript 

<script>
    $(document).ready(function() {
        var headerTop = $('#header').offset().top;
        var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#subMenu").is(":visible") === false)) {
                    $('#subMenu').fadeIn('slow');
                }
            } else {
                if ($("#subMenu").is(":visible")) {
                    $('#subMenu').hide();
                }
            }
        });
    });
</script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
  
        // Add hash (#) to URL when done scrolling (default click behavior)
        //window.location.hash = hash;
      });
    } // End if
  });
});
</script>
Html 
<div id="header"><ul><li><a href="#section1">Section Menu 1</a></li>
<li><a href="#section2">Section Menu 2</a></li>
<li><a href="#section3">Section Menu 3</a></li>
</ul></div>
<div id="subMenu">
<ul><li><a href="#section1">Section Menu 1</a></li>
<li><a href="#section2">Section Menu 2</a></li>
<li><a href="#section3">Section Menu 3</a></li>
</ul>

</div>
<div id="content">
    <div class="main" id="section1">
  <section style="background-color:#F0F8FF">
<h1> SECTION MENU 1 CONTENT </h1>

  </section>
</div>
<div class="main" id="section2"style="background-color:#7FFFD4">
<h1> SECTION MENU 2 CONTENT</h1></section>
</div>
<div class="main" id="section3">
  <section style="background-color:#00FFFF">
    <h1> SECTION MENU 3 CONTENT</h1></section>
</div>
</div>

Complete Code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
html, body {
margin:0;
padding:0;
width:100%;
font-size:1em;
color:#ffffff;
}

#header {
height:80px;
background:#1240AB;
padding:20px;
border-bottom:3px solid #4671D5;
}

#subMenu {
height:50px;
width:inherit;
background:#6c8cd5;
display:none;
position:fixed;
top:0;
left:0;
z-index:500;
opacity:.9;
padding:15px;
}

#content {
margin:20px;
font-size:2.25em;
color:#232323;
height: 1000px;
}
#content h1 {
    font-size: 20px;
    margin: 0 auto;
    padding-top: 5%;
    text-align: center;
}

section {
    min-height: 100%;
}
.main {
    height: 100%;

}
li {
    color: #000;
    display: inline-block;
    font-size: 16px;
}
li a {color: #fff; text-decoration: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="header"><ul><li><a href="#section1">Section Menu 1</a></li>
<li><a href="#section2">Section Menu 2</a></li>
<li><a href="#section3">Section Menu 3</a></li>
</ul></div>
<div id="subMenu">
<ul><li><a href="#section1">Section Menu 1</a></li>
<li><a href="#section2">Section Menu 2</a></li>
<li><a href="#section3">Section Menu 3</a></li>
</ul>

</div>
<div id="content">
    <div class="main" id="section1">
  <section style="background-color:#F0F8FF">
<h1> SECTION MENU 1 CONTENT </h1>

  </section>
</div>
<div class="main" id="section2"style="background-color:#7FFFD4">
<h1> SECTION MENU 2 CONTENT</h1></section>
</div>
<div class="main" id="section3">
  <section style="background-color:#00FFFF">
    <h1> SECTION MENU 3 CONTENT</h1></section>
</div>
</div>
<script>
    $(document).ready(function() {
        var headerTop = $('#header').offset().top;
        var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#subMenu").is(":visible") === false)) {
                    $('#subMenu').fadeIn('slow');
                }
            } else {
                if ($("#subMenu").is(":visible")) {
                    $('#subMenu').hide();
                }
            }
        });
    });
</script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
  
        // Add hash (#) to URL when done scrolling (default click behavior)
        //window.location.hash = hash;
      });
    } // End if
  });
});
</script>
</body>
</html>
 

 

Comments

Post a Comment

Popular posts from this blog

High light Search Result In Wordpress

High light Search Result In Wordpress add this function in your themes function.php function highlight_results ( $ text ) {      if ( is_search ( ) ) { $ keys = implode ( '|' , explode ( ' ' , get_search_query ( ) ) ) ; $ text = preg_replace ( '/(' . $ keys . ')/iu' , '<span class="search-highlight">\0</span>' , $ text ) ;      }      return $ text ; } add_filter ( 'the_content' , 'highlight_results' ) ; add_filter ( 'the_excerpt' , 'highlight_results' ) ; add_filter ( 'the_title' , 'highlight_results' ) ;   function highlight_results_css ( ) { ? > <style> .search-highlight { background-color : #FF0 ; font-weight : bold ; } </style> < ? php } add_action ( 'wp_head' , 'highlight_results_css' ) ;
5 comments
Read more

Redirect In contact form 7

add_action( 'wp_footer' , 'redirect_cf7' ); function redirect_cf7() { ?> < script type = "text/javascript" > document.addEventListener( 'wpcf7mailsent' , function ( event ) { if ( '1377' == event.detail.contactFormId ) { // Sends sumissions on form 947 to the first thank you page location = 'https://www.panelesyceldassolares.com/regreso' ; } else { // Sends submissions on all unaccounted for forms to the third thank you page location = 'https://www.panelesyceldassolares.com/regreso-2/' ; } }, false ); </ script > <?php }
Post a Comment
Read more

Get Single Product By ID in Opencart

<?php if(!empty($_POST["country_id"])) {     $query ="SELECT * FROM oc_product WHERE product_id = '" . $_POST["country_id"] . "'";     $results = $this->db->query($query);   $query2 ="SELECT * FROM oc_product_description WHERE product_id = '" . $_POST["country_id"] . "'";   $results2 = $this->db->query($query2);   $rowresults2 = $results2->row;   $rowresults = $results->row;   $name1 = $rowresults['model'];   $name2 = $rowresults2['name'];   $name3 = $rowresults['price'];   $name4 = 'Exe.' ?>
Post a Comment
Read more