$('.mainNav a[href^="#"]').on('click', function (event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('body').stop(true).animate({
scrollTop: target.offset().top - 130
}, 1000);
}
return false;
});
I attempted to implement the preventDefault() method but unfortunately, the flickering issue persisted.
My suggested solution is as follows:
- Remove the unnecessary "return false" statement since you are already using preventDefault(), and make sure it comes before any conditional statements
- Omit the unnecessary true parameter in the stop() function call
- Consider using $('html, body') instead of just $('body')
$('.mainNav a[href^="#"]').on('click', function (event) {
var target = $($(this).attr('href'));
event.preventDefault();
if (target.length){
$('html, body').stop().animate({
scrollTop: target.offset().top - 130
}, 1000);
}
});
If these changes do not resolve your issue, I recommend creating a jsfiddle or codepen to demonstrate the problem. It's possible that the flickering could be caused by elements other than the script itself.
There doesn't seem to be a problem here, except for some minor issues with your JQ code
I created a simple example. Check it out here on jsfiddle
or view the code snippet below :
$('.mainNav a[href^="#"]').on('click', function (event) {
event.preventDefault();
var target = $(this.getAttribute('href'));
if (target.length) {
$('html,body').stop().animate({
scrollTop: target.offset().top - 130
}, 1000);
}
});h1 {
color:#fff;
font-size:30px;
margin:0
}
#home {
height:300px;
background:red;
margin-top:48px;
}
#about {
height:600px;
background:green
}
#contact {
height:200px;
background:blue;
}
ul li {
list-style:none;
display:inline-block
}
ul {
position:fixed;
padding:15px 0;
width:100%;
background:rgba(255,255,255,0.6);
top:0;
margin:0
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainNav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="home">
<h1>WELCOME !</h1>
</div>
<div id="about">
<h1>About Us</h1>
</div>
<div id="contact">
<h1>Contact Us</h1>
</div>My landing page is all set up, but I'm looking to tweak the font sizes and spacing for mobile users. Can these changes be made using design tools instead of digging into the code? ...
Utilizing a jQuery plugin called jformslider, which can be found at https://github.com/harishuw/jFormslider My website serves as a survey platform and the HTML code includes: <form> <ul> <li> // The ...
The code snippet below is encountering compatibility issues with IE7, despite functioning properly on IE 8, IE 9, and all other browsers. Even the inclusion of alert("something"); does not yield the desired outcome - curiously, another script is executing ...
I'm having a tough time figuring this out. I initially thought it was the negative margin causing the issue, but even after removing it, the problem persists. Check out the link below to see what I mean when you click on one of the list items at the ...
Within my JavaScript file, I am making the following call: $.ajax({ type: "POST", dataType: "application/json", url: "php/parseFunctions.php", data: {data:queryObj}, success: function(response) { ...
Hi there! I've implemented a hover effect on a card in my code. When the user hovers over the card, a shadow effect and an Add To Cart button will appear. However, I want to display the card shadow effect when the user hovers over the button as well. ...
Currently, I'm facing an interesting challenge when it comes to unit testing and the flux data stores. Because the data stores are singletons that are only instantiated once (upon module import), any changes made during unit tests remain persistent. ...
I'm currently working on a project and facing some challenges with managing routes. My frontend is split into two sections: one for the client side and the other for the admin panel, which is responsible for managing the client side. For example, if I ...
Is there a way to adjust the position of the navbar-toggle button http://prntscr.com/5sldgb within the navbar after changing its height? Here is the HTML code: <div class="navbar navbar-default"> <div class="container"> ...
Storing and retrieving a function from the database using node.js is causing some unexpected behavior. When I attempt to log the column containing the function, this is the output: (function(settings){var options = {host: 'somehost.com',path: & ...
I have a specific requirement to showcase a lineup of elements in a single row, granting users the ability to scroll through them. Upon reaching the end of the scroll, a function should be triggered to add more elements to this lineup. I've successfu ...
I'm attempting to utilize bootstrap modal with ajax, but I'm facing an issue where the screen darkens upon clicking, but the modal never appears. Any tips or a better approach to tackle this problem? measures/index.html.erb <%= link_to &apo ...
In my grid view, I have a textbox nested inside a TemplateField. I want to retrieve the value of this textbox when a button is clicked: This is where I create the textbox: <ItemTemplate> <asp:TextBox runat="server" ID="txtEmail" Text=&a ...
I've developed this JavaScript code: function PartialViewLoad() { $.ajaxSetup({ cache: false }); $.ajax({ url: "/ControllerAlpha/MethodBeta", type: "GET", dataType: "html", data: { s ...
As I attempt to utilize a JS module within a TypeScript File, I encounter errors due to the absence of type declarations in the JS module. The root cause lies in a default argument within the imported JS function that TypeScript erroneously interprets as ...
Despite spending an hour searching online, I feel a bit hesitant to ask this question. Can null characters (ascii null or \0) be used within JSON? I know they are not allowed within JSON strings, but my query is whether they can be included in the bod ...
Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image? Every attempt to implement it ...
I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...
I have a scenario where I need to address the following issue: I have an Object with a property called specs. This property consists of an Array that contains several other Objects, each having two properties: name value Here is an example of what my o ...
I recently created a modal component using the following template structure: <div class="header"></div> <div class="body"> <ng-content></ng-content> </div> <div class="footer" ...