Can someone help me out with this issue? The header on my page is fixed at the top and has a height of 75px. When I click on a link (
<a href="/company/#contact/">contact</a>Appreciate any assistance, thank you!
A different approach from the suggestions provided by others would involve overriding the default scrolling behavior of the browser when navigating to anchors. Instead, you can calculate the scrolling action based on the target element's offset from the top of the page using the .offset().top method, and adjusting for the height of a fixed header element.
Consider the following HTML structure:
<header>
Fixed header.
<a href="#head1">Heading 1</a>
<!-- additional headers -->
</header>
<h1 id="head1">Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel dictum nulla. Pellentesque tincidun</p>
<!-- more content -->
The JavaScript implementation can be a bit complex. Firstly, check if the URL contains a hash, and if so, call a function to adjust the page scroll position. Otherwise, listen for click events on internal anchors using the selector a[href^="#"]. The function should perform the following tasks:
window.location.hash or the href attribute).offset().top.height() or a fixed value like 75)Combining the steps above, you can use the following script:
$(function() {
// Define scroll position modifier
var scrollPos = function(targetID) {
var targetOffset = $(targetID).offset().top;
$(window).scrollTop(targetOffset - $('header').height());
};
// Update scroll position if hash is present in the URL
if(window.location.hash) {
// Remove '#' at the beginning with .substring(1)
scrollPos(window.location.hash.substring(1));
}
// Update scroll position on anchor click
$('a[href^="#"]').click(function(e) {
// Prevent default scrolling behavior
e.preventDefault();
// Update scroll position manually
scrollPos($(this).attr('href'));
});
});
View the fiddle for a demonstration: http://jsfiddle.net/teddyrised/u11011jc/
If you want to achieve a smooth scrolling effect, you can utilize jQuery:
$(function() {
$('html, body').animate({
scrollTop: "75px"
}, 2000);
});
For a practical demonstration, check out this example on jsfiddle:
Having an absolutely positioned (or fixed position) header requires some adjustments to bring the body content down effectively.
One technique is to insert a section above the top-most section on the page with a height of 75px. This will visually lower the page by 75px. (I often refer to this as nav-push, as it pushes the content down due to the navigation bar)
Alternatively, you can assign a class to your anchor tag and position it relatively, then provide it with a top offset of 75px
a#contact {
position:relative;
top:-75px;
}
My situation involves a dropdown list: @Html.DropDownList("InnerId", Model.GroupDropDownList, new { @class = "select_change" }) I am looking to achieve submitting the value when a user clicks on the selection without needing to select and then use a subm ...
I am working with an unordered list and have set it up to display a background image on the li element when the cursor hovers over it: <div class="sidebar"> <ul> <li>test</li> <li>test</li> ...
There are multiple li elements created in this way: echo '<ul>'; foreach ($test as $value){ echo '<li class="li_class">.$value['name'].</li>'; } echo '</ul>'; This code will generate the fol ...
I've been looking everywhere for a solution to my problem with no luck... I have a complex nested json object like this: var obj = { a: 1, b: 2, c: { a: 1, b: 2, c: {a: 'hello', b: 'HowAreYou?'} } }; someValue = 'hello'; ...
I have been developing a small study website but encountered an issue with the title. Despite extensive internet research, I have not been able to find a solution. The system I am using is Ubuntu with node.js, express, and mysql. app.js var fs = requir ...
Within my project, there is a file named registration_email.tpl that is passed as email_template in the bottle.template() function. This involves passing variables such as username, email_addr, role, creation_date, and registration_code. email_text = ...
Many questions on StackOverflow share similarities with this one, but I have not been able to find a solution that fits my issue. My code functions correctly when attempting to populate items in a "Select" control. It successfully retrieves data if the it ...
Hello everyone, I'm encountering an issue with this code where I am trying to display a variable in the content. Take a look at the code below: I am attempting to show the variable $name in the div #divToToggle upon clicking, but the variable does no ...
I am currently facing an issue with embedding wetransfer into a website using iframe. The problem is that when the page loads, it automatically scrolls past the header section of the site instead of loading the new page at the top. How can I prevent this ...
I've been trying to add animation to a right-aligned Bootstrap dropdown using CSS, but I'm having trouble getting it to work. I attempted setting the transition property to target the element's width, but it doesn't seem to be effective ...
I need help implementing a feature that allows users to return to the same position on a webpage when clicking the back button. A common example is on ecommerce sites where if you scroll down, click on a product, then go back, you should be taken back to t ...
I want to create a navigation system that responds to clicks. The structure of the website is straightforward: site.com/page_2/ site.com/page_3/ ... site.com/page_n/ Is there a way to obtain the URL of a specific page number? ...
I have encountered an issue where my files work fine when uploaded to an online server, but do not work when accessed locally offline. An error message about a cross-origin issue appears. How can I solve this problem? Error message: Security Error: Conte ...
https://i.sstatic.net/I8t3k.png function saveDateOfBirth( dob ) { sessionStorage.dateOfBirth = dob; } function getDateOfBirth() { document.getElementById("confirm_dob").textContent = sessionStorage.dateOfBirth; } function pr ...
I have been trying to incorporate sortable columns into my HTML table and decided to experiment with the jquery tablesorter. I have followed the syntax below, but for some reason, my table is not allowing me to sort. Can you help me understand why? &l ...
I've created a list of divs, each with a corresponding pair containing more details. When you click on the "intro" div, the detailed pair opens and the intro is hidden. Each div also has a checkbox. I encountered an issue where clicking the checkbox i ...
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink li ...
I'm currently delving into the world of JQuery and finding myself puzzled as to why certain functions are not producing any output. Check out the script below: function Person(name,country){ this.name = name; this.country = country; } var ...
When working with Cordova, I encountered an issue where I needed to trigger a button event from a listener. In my app, I am loading a specific page . This page contains a button with the class name "btn", and I wanted to display an alert when that button i ...
For example: Here are a few names. - Mujib - Amjed - Anees When someone clicks on "Mujib," the URL should remain the same and only the parameter should change. When someone clicks on "Amjed," the URL parameter should change to . ...