I use this script for scrollspy offset height in my bootstrap theme. This code doesnt work properly in firefox and the heght offset aint operate, this works on chrome.
var offsetHeight = 120;
$("#p-menu a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $(this.hash).offset().top-offsetHeight}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
HTML:
<ul class="nav nav-tabs bg" role="tablist" id="p-menu">
<div class="container">
<i id="info-icon"></i><span>Informations</span>
<i id="details-icon"></i><span>Specifications</span>
<i id="comments-icon"></i><span>Comments</span>
<i id="diagram-icon"></i><span>Diagram</span>
</div>
</ul>
<div class="row bg" id="info" data-spy="scroll" data-target=".navbar-example">
<div class="p_info" id="details">
...
</div>
<div class="p_info" id="comments">
...
</div>
<div class="p_info" id="diagram">
...
</div>
</div>
I had the same Problem and solved it with this
history.pushState(null, null, myHash);
instead of
window.location.hash = myHash;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to help with the javascript code. A link works correctly on a PC, but not on a mobile device. On the mobile device works only links with #.
<div class="site-wrap" id="home">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-md-3 col-xl-4 d-block">
<h1 class="mb-0 site-logo">My website<span class="text-primary"></span> </h1>
</div>
<div class="col-12 col-md-9 col-xl-8 main-menu">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block ml-0 pl-0">
<li>Home page</li> <!-- this link works -->
<li>Test link - 1</li> <!-- this link works -->
<li>Test link - 2</li> <!-- this link doesn't work -->
<li>Test link - 3</li> <!-- this link doesn't work -->
</ul>
</nav>
</div>
<div class="col-6 col-md-9 d-inline-block d-lg-none ml-md-0" ><span class="icon-menu h3"></span></div>
</div>
</div>
</header>
<div class="site-section" id="test">
<!-- ..... -->
</div>
If I click on the link on the mobile device I will get an error from Chrome in the console.
main.js:228 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:228)
at HTMLBodyElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLBodyElement.y.handle (jquery-3.3.1.min.js:2)
There is probably a problem.
// navigation
var OnePageNavigation = function() {
var navToggler = $('.site-menu-toggle');
$("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().top - 0
}, 1000, 'easeInOutCirc', function(){
window.location.hash = hash;
});
});
};
OnePageNavigation();
Thanks for your help and answers.
Make sure you handle the links without hash gracefully:
var OnePageNavigation = function() {
var navToggler = $('.site-menu-toggle');
$("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
var hash = this.hash;
if (!hash) {
return true;
}
e.preventDefault();
$('html, body').animate({
'scrollTop': $(hash).offset().top - 0
}, 1000, 'easeInOutCirc', function(){
window.location.hash = hash;
});
});
};
OnePageNavigation();
Before I start I want to point out that I'm not competent in coding whatsoever. I'm 100% an amateur enthusiast who learns on the go while coding and I have limited knowledge about any of this.
I want add two buttons next to the scrolling bar/window as seen here: https://drive.google.com/open?id=1vvMNKguytQc_jtaVAYpOTJwVNZs4rmZY. However as much as I try I can't make it work. My website uses jQuery v2.1.1 JavaScript Library. My question is why it doesn't it work and how I can make them work?
var step = 25;
var scrolling = false;
// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
// Animates the scrollTop property by the specified
// step.
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("up");
}).bind("mouseout", function(event) {
scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("down");
}).bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=1px" : "+=1px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
scrollContent(direction);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section">
<h2 class="section-title st2 mb25">Our Products</h2>
<div class="container">
<div class="row page-services mt10">
<div class="col-sm-4 col-md-3 sm-box" id="content">
<i class="fas fa-chevron-up" id="scrollUp"></i>
<ul class="nav nav-tabs vertical">
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
</ul>
<i class="fas fa-chevron-down" id="scrollDown"></i>
</div>
<div class="col-sm-8 col-md-9">
<div class="tab-content">
Here is the source of the javascript and demo: http://jsfiddle.net/s5mgX/1709/
When my page first loads, I have a fullscreen jumbotron. When the user goes to scroll down with the mousewheel I want to use the Jquery animate effect to bring the navbar (underneath the jumbotron) to the top of the page.
I already have a button that can achieve this but I would like to do it with the mousewheel too.
How can i achieve this?
Thank you
<!-- Jumobtron-->
<div class="jumbotron" style="height: 100vh;">
<a href="#mainNavbar">
<button type="button" class="btn" id="btnToNav">To Navbar</button>
</a>
</div>
<!-- Navbar -->
<nav class="navbar sticky-top" id="mainNavbar">
<div class="container">
<a asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
</div>
</div>
</nav>
Jquery:
$(document).ready(function() {
$('#btnToNav').on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#mainNavbar").offset().top
}, 1000);
});
});
You can use
mousewheel OR DOMMouseScroll
If you want to run that function in Firefox as well, you should use both of them, since Firefox doesn't have mousewheel, but they have DOMMouseScroll
$(document).ready(function() {
$('#btnToNav').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#mainNavbar").offset().top
}, 1000);
});
$('html, body').on('mousewheel', function(e){
e.preventDefault();
var delta = event.wheelDelta;
if(delta < 0){
// scroll from top to bottom
$('html, body').animate({
scrollTop: $("#brand").offset().top
}, 1000);
}else{
// scroll from bottom to top
$('html, body').animate({
scrollTop: $("#btnToNav").offset().top
}, 1000);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Jumobtron-->
<div class="jumbotron" style="height: 100vh;">
<a href="#mainNavbar">
<button type="button" class="btn" id="btnToNav">To Navbar</button>
</a>
</div>
<!-- Navbar -->
<nav class="navbar sticky-top" id="mainNavbar">
<div class="container">
<a id="brand" asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
</div>
</nav>
I've got a problem with my Laravel site.
It doesn't load any JS. The Collapse of my navbar and the auto-scroll function don't work at all. It's like it doesn't load the JS at all. But I don't get any errors and the hyperlinks are fine. I can load the files in my Browser without any problem. Only the functionality doesn't work.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
#include('layouts.nav')
</nav>
the Navbar file
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dr. Geiger</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>Öffnungszeiten</li>
<li>Unsere Schwerpunkte</li>
<li>Unsere Arztpraxis</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
And the smoothscroll.js file
$(document).ready(function() {
// Add scrollspy to <body>
$('body').scrollspy({
target: ".navbar",
offset: 50
});
// Add smooth scrolling on all links inside the navbar
$("#navbar-collapse-main 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
});
});
I am unable to get the height of my navigation.
Attempt #1:
$("#process-link").click(function() {
$('html, body, #project-container').animate({
scrollTop: $("#process-work").offset().top
}, 2000 + $("nav#primary").height());
});
Attempt #2:
var headerHeight = $("nav#primary").height();
$.address.change(function(evt) {
var target = "#" + evt["pathNames"][0]; //Get the target from the event data
// If there's been some content requested go to it…else go to the top
if(evt["pathNames"][0]) {
var scrollToPosition = $(target).offset().top - headerHeight;
$('html, body, #project-container').animate({ 'scrollTop': scrollToPosition }, 600);
} else {
$('html, body, #project-container').animate({ 'scrollTop': '0' }, 600);
}
return false;
});
Attempt #3
$(function() {
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $( "#process-work" ).offset().top + $('nav#primary').height()
}, 2000);
return false;
});
});
HTML
<nav id="primary">Content</nav>
<div id="arrow-nav" class="container-full clearfix">Content</div>
<div id="project">
<div id="project-container">
<div class="container">
<section>
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<a id="process-link">View Process <i class="fa fa-long-arrow-right"></i></a>
<div class="row">
<div id="process-work">
<div class="col-6 fixme">
<h2 id="process-title">Process Work</h2>
<p id="process-description"></p>
</div>
<div class="col-6">
<div id="process-wireframes" class="owl-theme owl-carousel"></div>
</div>
</div><!-- end process-work-->
</div>
</section>
</div>
</div><!-- end project container -->
</div><!--closes project-->
I'm trying to make it so once #process-link is clicked it slides you to #process-work and calculates the height of nav#primary and #arrow-nav and offsets accordingly.
This javascript currently achieved what I wanted to do. I grouped all div elements into one called #project-content and calculated the height of that plus the nav. Because the page is fixed it was causing issues.
HTML
<div id="project-content">
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<div style="background:#919191" class="hr"></div>
<a id="project-link" target="_blank">View Website <i class="fa fa-long-arrow-right"></i></a>
<a id="process-link" data-type="slideTo" data-target="process-work">View Process <i class="fa fa-long-arrow-right"></i></a>
<div id="project-tag"></div>
<div id="project-images"></div>
</div><!--end project content-->
Javascript
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $('nav#primary').height() + $("#arrow-nav").height() + $("#project-content").height() + 30
}, 2000);
return false;
});
Look at the OP to see the divs that also exist in the document and what I am calculating. #project-container has padding-top:60px; which I think also affected the offset, which is why I added 30.