I used this bootstrap template to create my website. Everything worked perfectly except for the "scroll to the element script". I kept encountering the following error: Uncaught Error: Syntax error, unrecognized expression: [href=#],[data-toggle],[data-target],[data-slide] I believe that this particular code is outdated and works well with JQuery 2x but not the newer versions. Can anyone assist me in modifying this script to make it functional?
// Function that scrolls to the selected menu item on the page $(function() { $('a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])').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; } } }); }); `
The complete source code can be found below:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick=$("#menu-close").click();>Start Bootstrap</a>
</li>
<li>
<a href="#top" onclick=$("#menu-close").click();>Home</a>
</li>
<li>
<a href="#about" onclick=$("#menu-close").click();>About</a>
</li>
<li>
<a href="#services" onclick=$("#menu-close").click();>Services</a>
</li>
<li>
<a href="#portfolio" onclick=$("#menu-close").click();>Portfolio</a>
</li>
<li>
<a href="#contact" onclick=$("#menu-close").click();>Contact</a>
</li>
</ul>
</nav>
<!-- Header -->
.
.
.
`