I'm working on my first bootstrap website and yes, I'm a noob. After a long journey, I found this template to work with.
At the end of the day, it will contain over 20 fullpage sections like the header with texts, images, videos and audios.
This template has a scrolling script:
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').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;
}
}
});
});
Now, here is the special price question. There is this 'one page scroll' by Pete Design. This contains a template-css and js-file.
Is it possible to mix these two templates?
I like to add the Pete Design JS-Template to add:
scrolling section by section with the mousewheel/keyboard arrows and the swipe-function but I want/like to use the design (espacially navbar!) from Startbootstrap.
Related
I've got the code below in our boilerplate that seems to work fine in the current setup. It scrolls to the section on the page when you click the navigation menu link or a link in a slick slider. What I found hard to solve is making it work when navigating from another page back to the homepage. It'll add the #discover hash to the url just fine, for example, but it won't register it for some reason.
It's been a while since I properly used jQuery 😅.
I've already added the standard on document ready code around the function hoping it would be that, but no dice. Hope anyone can clue me in about what's happening here.
$(function(){ });
/*
Only enable this when you want smooth scrolling!
Usage:
- Give the anchor you want to scroll to a certain position a href which starts with # and the class "scroll" ()
- Give the container you want to scroll to a name (<section name="container"></section)
- ???
- profit
*/
const scrollOffset = 0 // the amount of pixels the animation should scroll "extra" (When you have a sticky navigation for example)
$(function () {
$(
'.menu__item a[href*="#"]:not([href="#"]), .slider-list__link[href*="#"]:not([href="#"])'
).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) + ']')
$('body').removeClass('no-scroll')
$('.navbar').removeClass('navbar--is-open')
if (target.length) {
setTimeout(() => { // This is used to prevent the animation from the menu closing from interfering with the scrolling animation. It could mess up the offsets otherwise
$('html, body').animate(
{
scrollTop: target.offset().top + scrollOffset, // Scroll to the target
},
400
)
return false
}, 500)
}
}
})
})
I am using some JavaScript to create a smooth scroll effect to achnor links. The site has a fixed header so the content needs to be offset by whatever the height of the header is (this varies due to #media rules). On top of this when the user is logged in to WordPress the content needs to be offset further by the height of the WP admin bar (again, the height of this vaires depending on screen size).
I have set up two variables in my script to separately get the height of both these elements:
var headerHeight = $('header').height();
var adminbarHeight = $('#wpadminbar').height();
Further on in the script I want to offset the top by the height of the header plus the height of the admin bar if it exists (i.e. if a user is logged in).
$('html, body').animate({scrollTop: target.offset().top - headerHeight - adminbarHeight }, 500,
I am trying to offset by the headerHeight and the adminbarHeight but this is not working for me. If I remove 'adminbarHeight' it works but then it does not look correct for logged in users.
Is there something wrong with my syntax? Or perhaps I need to create an if statement to check if the adminbarHeight is greater than 0?
The full script I am enqueueing in my WP child theme is below:
( function( $ ) {
'use strict';
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
var headerHeight = $('header').height();
var adminbarHeight = $('#wpadminbar').height();
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) {
event.preventDefault();
$('html, body').animate({scrollTop: target.offset().top - headerHeight - adminbarHeight }, 500,
function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus();
};
});
}
}
});
}( jQuery ) );
Any help will be greatly appreciated! I am new to JavaScript so apologies if this is a really obvious error.
Thanks,
Chris
I am having a strange issue with jquery scrolling.
Please note that I am editing a template, 100% code credit goes to megakit & keenthemes.com
At the bottom of the page, there is a google maps section. I want to remove this, but for some reason when I do, it breaks the scrolling at the top of the page.
HTML - top of the page where scrolling is breaking
<a href="#js__scroll-to-section" class="s-scroll-to-section-v1--bc g-margin-
b-15--xs">
<span class="g-font-size-18--xs g-color--white ti-angle-double-down"></span>
<p class="text-uppercase g-color--white g-letter-spacing--3 g-margin-b-0--
xs">Learn More</p>
</a>
HTML - bottom that I want removing
<section class="s-google-map">
<div id="js__google-container" class="s-google-container g-height-400--xs">
</div>
</section>
JS for scrolling
var handleScrollToSection = function() {
$(function() {
$('a[href*=#js__scroll-to-]:not([href=#js__scroll-to-])').on('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 - 90
}, 1000);
return false;
}
}
});
});
}
Indentation has gone a bit wrong copying and pasting but looks correct in the code.
Thanks,
Jimmy
I want this effect:
(blue is the visible part for user)
structure of the page looks like this:
<div id="page1"></div>
<div id="page2"></div>
<div id="page3">
<div id="page3-1"></div>
<div id="page3-2"></div>
<div id="page3-3"></div>
</div>
<div id="page4"></div>
I want to make leftmenu points to take me with a smooth scroll on click to a certain point of the website. I found this nice function for this:
$(function() {
$('a[href*=#]:not([href=#])').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;
}
}
});
});
It works great, but when I add one more a little modified (to target different anchors $('#page3 a[href*=#]:not([href=#])').click(function() {) and with scrollLeft: target.offset().left (for that horizontal scroll page) , it works only if there are overflows.
I made overflow: hidden for every page and overflow-x: scroll to that certain page that should scroll horizontally (to remove white space on the website) and then it doesn't work. maybe i should target different anchors. It is in Joomla. I think I am very close but can't figure it out. thanks!
I have the Html code like below,
<div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div>
And I write the jquery to scroll to the gameNo 456 like below.
var container = $("html,body");
var scrollTo = $(this).find('.saveIcon').attr('data-unique', 456);
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
I am using jQuery version 1.9. I am getting error in console:
Cannot read property 'top' of undefined
Is that not possible to scroll to class name instead of id?
But it is working fine in Firefox. But not in chrome or IE.
I try to find the solutions from stackoverflow. But all other solutions are different than my case.
You are not targeting a DOM object, you are targeting a string.
scrollTo = $(this).find('.saveIcon').attr('data-unique', 456); -> this is wrong
So, while you are trying to target an element, you are actually setting the 'data-unique' to the '.saveIcon' element.
Try this:
scrollTo = $('.saveIcon');
Working code:
var $container = $("html,body");
var $scrollTo = $('.saveIcon');
$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);
have you looked at scroll to view function?
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
element.scrollIntoView(true);
these two codes worked for me like a charm this first will take to scroll to the top of the page but if you want to scroll to some specific div use the second one with your div id.
$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();
If you want to scroll to by a class name use the below code
var $container = $("html,body");
var $scrollTo = $('.main-content');
$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top +
$container.scrollTop(), scrollLeft: 0},300);
I am using following plain js, please try if you can use it in you codes:
$('a.smooth-scroll[href*=#]:not([href=#])').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;
}
}
});