is it possible to do Smooth Scroll with Jquery 1.10.2 in AngularJs 1.0.7? I have tried many examples, but none of them are working. I think I have always the same issue.
According to this example: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
I have:
<body ng-cloak>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
...
Click Me to Smooth Scroll to Section 2 Below
...
<div id="section2">
...
<script>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</script>
</body>
This is not working. I think it´s because Angular is parsing the link. Any ideas? I know there are a couple of directives but not working for me neither. I would like to approach it with Jquery.
Related
This is my script for scrolling.
$("#oneA").click(function() {
$('html, body').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
and my html
<div id='oneA' style='height:100px;'></div>
<div id='twoA' style='height:100px;margin-top:300px'></div>
The above works fine as I tested on a static/normal page. But when I try the same on a popup box, it doesn't work at all. I suspect this could be library conflict between the popup and the jQuery scrolling.
I've placed these libraries
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='../js/jquery.magnific-popup.min.js'></script>
<script src="../js/index.js"></script>
in the footer for the popup box. Without this the popup won't appear.What's the possible way to make the scrollTop work on this popup, please?
$("#oneA").click(function() {
$('#popupId').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
In the place of, html,body I replaced with the popupbox id and it worked within popup.
I have an problem with my JavaScript and I'm not sure how to deal with it.
So I'm using this script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 700);
return false;
});
});
The script is making a smooth scroll on my page which I think is really cool, so I don't want to delete it.
But my problem is, that I also have a simple gallery slider on my page, but the JavaScript will effect that gallery slider. It scrolls to the top when clicking on a link in href. The code for the gallery slider is:
<div id="images">
<img id="billede1" src="http://i.imgur.com/dL3io.jpg" />
<img id="billede2" src="http://i.imgur.com/qASVX.jpg" />
<img id="billede3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="billede4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
The thing is, I really like the simple code and I'm trying to be better, so I don't want to use some advanced code which I don't understand.
Is is somehow possible to disable the JavaScript not to be working in my div? Or maybe called it something else than the "href"?
I think my "href" is the problem.
So.. Here it is in fiddle:
http://jsfiddle.net/62dsqLff/
and you can see the problem.
Really thanks. I appreciate it :-)
Let me share a fiddle for you JSFIDDLE on this demo I am given new class called .nav for your navbar anchor tags. Then rewrite the script like below.
$('a.nav').click(function () {
alert( $($(this).attr('href')).offset().top);
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 700);
// return false;
});
Use an id for that anchor, instead of a vague "nav a" which will trigger on any a inside your nav element. Also prevent default action if you are using an a as a button. The right way to create your "return top" script, is to target a button. Instead of nav a, create a button, give it an id, and target that id.
I have a set of buttons that are currently just images with different hover effects defined like so:
<img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" />
And what I want to do with them is scroll down to a different div upon clicking them but I am unsure on how to do this. I found a sample piece of code that works in this scenario here http://jsfiddle.net/ryXFt/3/ but my problem is that I don't know how to apply this to my images that I have created.
This is my failed attempt at trying to get it to work:
<script type="text/javascript">
<script>
$("home.PNG").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
However it does not work and I am unsure simply how to get javascript to recognise the image as something to click.
your selector is wrong
<script type="text/javascript">
<script>
$("#myID").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
look at the jquery documentation
You need to add an id property to the image:
<img src='home.PNG' id='homeimg'.....>
And access it like this:
$("#homeimg").click(...
I want to scroll to a div when I load my page, and I can do it using Jquery with this:
<script>
$(document).ready(function (){
$('html, body').animate({
scrollTop: $(".active").offset().top
}, 2000);
return false;
});
</script>
In the same page I have a slider created using flexslider.
After importing flexslider css and js I done this:
<script type="text/javascript">
(function($) {
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
})(jQuery);
</script>
At this link you can see all the flexslider file: https://github.com/woothemes/FlexSlider
The problem is when the page is loaded, the scroll start correctly, but at a certain point
seems that while the scrollout is running the slider is loaded at the same time and this creates problems to the scrollout that does not seem to know where to position the window.
Anyone can help me? I'm getting mad with this, I tried to find an answer on the net but I have not met anyone with my problem.
Thank you.
Having some problems with the jQuery .animate functionality.
I have implemented a 'Back to top' link on my website here: http://www.unforgivengamers.com/
It is supposed to get you back to the top of the page once you click it.
Here is my jQuery code:
<script type="text/javascript">
jQuery.noConflict();
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
</script>
The problem: the animation is not smooth! I want it to scroll slowly, not instant.
Like this: http://designwoop.com/labs/smooth%20scroll/smooth-scroll.html
Am I missing something out here?
I'm using jQuery 1.8.3
You should put your code within document ready handler, the animation is not even performed on your page, the anchor is on the bottom of the page and your code without document ready on the top of the page.
jQuery(document).ready(function(){
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})