Develop Reference

JQuery smooth scroll functionality not working on moving to angularjs 2

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.

Smooth Scrolling not working correctly

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.

Smooth scrolling to anchor on same page

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

external links to id anchor not working - using jquery waypoints

I am having an issue having an external page link to an id anchor on my index page. Every time I try to link to an anchor it just goes to the top of the page. It almost looks like it shows the page at the anchor for a split second but then just the top of the page.
You can take a look here .. http://jointmedias.com/clients/misfit/site/
All of the anchors work on the page but again can not link to a specific anchor from an external page. This should work http://jointmedias.com/clients/misfit/site/#p3 but it dosent.
I am using this js script for the smooth scrolling (again it works perfect on the page itself)
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $("#topsec").height();
if($(window).scrollTop() >= scrollTop){
$('#nav').css({
position : 'fixed',
top : '0'
});
}
if($(window).scrollTop() < scrollTop){
$('#nav').removeAttr('style');
}
})
})
$('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
}, 2000,'easeInOutCubic');
return false;
}
}
});
I am too new to JS to know if this has something to do with it or not.. any help would be much appreciated. Thanks for taking a look.
Brian

animated anchor scrolling method for iOS with iScroll.js

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;
}
}
});