Im using iScoll.js to help with scrolling animations on iOS. Basically it uses hardware accelerated CSS properties to move the content, not traditional scrolling.
iScoll is working well but I'm also trying to implement a smooth scrolling anchor solution.
It works fine on desktop but the problem is that I can't workout how to retrieve the correct offset value to pass to the iScoll Instance. I feel like im super close to a solution:
var ua = navigator.userAgent,
isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);
if (isMobileWebkit) {
iScrollInstance = new iScroll('wrapper');
}
$('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) {
if (isMobileWebkit) {
iScrollInstance.refresh();
/* issue here with "target.position.top" = "undefined" */
iScrollInstance.scrollTo(0, target.position.top, 1000);
}else{
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}
return false;
}
}
});
full demo here http://jsfiddle.net/Wccev/3/
Not sure why but it seems iScroll.js didn't like jQuery in the scrollTo function. So setting the variable ahead of time seemed to help. I also had to work out the correct offset because of the way iScroll moves a div not the screen.
If anyone needs it, this jQuery should help with smooth scrolling anchors on IOs devices provided you setup iScroll correctly:
var ua = navigator.userAgent,
isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);
if (isMobileWebkit) {
$('html').addClass('mobile');
}
$('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) {
if (isMobileWebkit) {
scrollOffset = $('#scroller').position().top;
targetOffset = target.offset().top;
iScrollInstance.refresh();
iScrollInstance.scrollTo(0, -(targetOffset-scrollOffset), 1000);
}else{
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}
return false;
}
}
});
Related
I coded a html web page and had applied jquery smooth scroll functionality. Its working fine here but after upgrading AngularJS 2 everything is working fine except smooth scroll.
My scrolling JavaScript is like this
$(function () {
$('a[href*="#"]:not([href="#"]), button[onclick="location.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;
}
}
});
});
Also tried this function to bind inside $(document).ready({}) but with no success.
I am working on visual studio with ASP.Net MVC framework.
I've been bashing my head against the wall trying plenty of smooth scrolling plugins to work why the signup button won't smooth scroll down to the #target section properly.
Please help hive mind, I am using CSS tricks code.
$('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;
}
}
});
You can see the pen with all the html css and other js at
https://codepen.io/samducker/pen/RVoORy
Cancel your code and try out this one (It's maybe a bit fast change it maybe to 500), it might be a bit laggy if you have so much content between your button and the anchor:
/*Scroll Down Button*/
$(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;
}
}
});
});
Your jQuery selector seems to be incorrect. Therefor the click function will not fire when you click on the button and will fallback to it's default anchor behavior. I forked your codepen and changed the jQuery selector to a see: https://codepen.io/anon/pen/VbmNXd
Try to change the jQuery selector to what works for your application.
Call me stupid, but I don't see it.
I have made a Joomla page with links to sections in the same page. very basic: <a href="#sed"> and then <p id="sed">. I include jQuery like this:
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
It is part of Joomla 3.
I am using this script from CSS-Tricks, which I have put in the of the page:
<script>
$(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;
}
}
});
});
</script>
I've fiddled with the CSS Tricks sample page (copy/pasted it to my own HTML editor and changed a bit of the code) and yes, it works, but I can't get it to work in my own page. The page just jumps to the anchor but doesn't scroll smoothly.
Mind you: I hardly know anything of JavaScript or jQuery, so bear with me... to a jQuery specialist this must be a piece of cake....
Here is the test page I have made: http://test.tomhiemstra.nl.
Any help appreciated.
Cheers,
Thom
I couldn't figure out what's causing this, but on your page the $ isn't getting recognized. Replace all the $ in your script to jQuery and it works.
jQuery(function() {
jQuery('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
if (target.length) {
jQuery('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Alternatively, it's probably a better idea to wrap your function in one that will map the $ to jQuery.
(function ($) {
$(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;
}
}
});
});
})(jQuery);
Can you try this
$('a[href^="#"]').click(function(event) {
event.preventDefault();
var target = $(this).attr("href").substring(1);
if(target) {
$('html,body').animate({
scrollTop: $('[name=' + target +']').offset().top
}, 1000);
}
});
With the help of Talya S. above, this is what I have come up with. I hope I have done it right, with all the brackets and curly brackets etc.:
<script>
(function ($) {
$(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;
}
}
});
});
})(jQuery);
</script>
Did I add too many brackets or too few?
What I still don't understand, though, is why the $ was not recognised as jQuery, which is one of the most basic things you learn in jQuery (yes, I had come that far :-P). If anyone can clarify that to me "like I'm a four year old".
Thanx again Talya S. and my apologies for misspelling :-)
Thom
I'm trying to code a menu for my website that has the possibility to scroll to anchors on the same page and anchors on different pages.
The first one is working. The code is:
$(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;
}
}
});
});
The menu is the same on every page, I can't edit his code on each page. So the HTML code basically is:
<a id="mylink" href="http://www.mcsoftware.com.br/sitemc/#allcontentcontact"><span>Contato</span></a>
<a id="mylink2" href="http://www.mcsoftware.com.br/sitemc/#bluecontent"><span>Parceiros</span></a>
And I'm using javascript to detect if the user is on the homepage, and if he is, it changes the href behaviour, because it's only on the homepage that the anchors are on the same page of the menu. Look:
var url = "http://www.mcsoftware.com.br/sitemc/";
$(function(){
if (location.href==url){
$('#menu #mylink').attr("href","#allcontentcontact");
$('#menu #mylink2').attr("href","#bluecontent");
}
});
Now, the problem is the second part of what I've said on the beginning of the post: Scroll to anchors on different pages.
So, what script should I use to do the trick and doesn't affect everything that I've already done? Is it possible?
(And the code need to hide the "#nameoftheanchor" from the URL, like the first code already do)
Thanks!
I did something that is working really well! But still shows the "#anchortag" on the URL when the anchor is on another page.
<script>
var url = "http://www.mcsoftware.com.br/sitemc/";
if (location.href==url) {
$(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;
}
}
});
});
} else {
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},2000,function()
{
location.hash = target;
});
}
$('html, body').hide();
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show();
jump();
}, 0);
}else{
$('html, body').show();
}
});
}
</script>
any help?
To answer your second question, the browsing history can be changed using
window.history.pushState() and
window.history.replaceState().
For how to use each function, see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
window.location.pathname will retrieve the current url path. So combining these concepts, I came up with the following:
history.pushState("", "", window.location.pathname);
This should remove the hash while keeping the rest of the url in-tact. If this doesn't solve your problem, hopefully it will at least get you started on the right path.
although this has been asked a few times I haven't found something which will fix my problem.
This is my code for the smooth scroll:
$(function() {
$('a[href*=#]:not([href=#]),a[href*=#]:not(a[data-toggle])').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's css-tricks code with a bit of editing.
This is the site: http://redrocketwebsitedesign.co.uk/test/my3DtwinAlpha/about/#arrow6
So the accordion is still being selected for the scrolling, and it's not running the accordion js.
I think there's a problem with my javascript not selector code :
a[href*=#]:not(a[data-toggle])
Any help appreciated :-]
This is what you are really looking for :
$('a[href*="#"]:not([href="#"]):not([data-toggle])').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;
}
}
});
:not([data-toggle])
is to avoid smooth scroll with bootstrap tab, carousel etc...
The page you provided has a mistake in code:
$('a[href*=#]:not([href=#]),'a[href^="#"]:not([data-toggle])').click(function() {
^^^ - extra and unnecessary character
So your handler is not set.
You can also consider specifying the class of the element(s) that should trigger a smooth scroll animation (thus excluding others, such as the accordion tabs), like this:
$('a[href*=#][class*="smooth"]:not([href=#])').click(function()
Or vice versa, specify the class of the element(s) that shouldn't trigger the script (in this case we exclude the class of the links that trigger the accordion effect):
jQuery('a[href*=#]:not([href*=#][class*="accordion-toggle"])').click(function()
var headp = $(".pixxett-header").innerHeight();
var stick = $(".pixxett-header.sticky").innerHeight();
$(document).on('click', 'a[href^="#"]:not([href="#"]):not([data-toggle])', function (event) {
event.preventDefault();
if (scroll == 0){
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - stick}, 500);
}else{
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headp}, 500);
}
});