I am using the to top arrow in website to move to the top section with smooth scroll.. Now its moving to top but not moving in smooth..
The js that i used to get smooth scroll was
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
BUt its not working..
The jsfiddle was https://jsfiddle.net/36m5kp00/
The jquery's that i have used was,
<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Use this
$(function() {
$('a.page-scroll').bind('click', function(event) {
$("html, body").animate({ scrollTop: 0 }, 1500);
event.preventDefault();
});
});
Actually you need to add the jquery easing plugin if you want to use custom easing methods like easeInOutExpo.
Note: jQuery comes with 2 easing methods linear & swing. Reference here: https://api.jqueryui.com/easings/
Here you can get it from: https://cdnjs.com/libraries/jquery-easing
It works well, Check it here: https://jsfiddle.net/ashishanexpert/36m5kp00/4/
Your working code should be like:
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#letTop:hidden').stop(true, true).fadeIn();
} else {
$('#letTop').stop(true, true).fadeOut();
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Related
I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.
Solved with queue: false; after the code.
Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
So below I have some of my JQuery code that should be causing the clicked value to scroll down to another section of the page. I'm not sure what's wrong with my code as it has stopped working, so I'd appreciate any feedback I can get on this.
$(".list-item1").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image1").offset().top
}, 700);
});
$("#list-item2").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image2").offset().top
}, 700);
});
$("#list-item3").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image3").offset().top
}, 700);
});
I need jQuery animate together with scrollTop to create a smooth scroll effect to my anchor links. In my current project this is not working. All the animate - scrollTop Events are doing nothing. I load jQuery 3.1.1 in the header. In my footer main.js i use the the following javascript:
$('a[href*=#]').on('click', function(event){
console.log("ScrollTop");
$("html, body").animate({ scrollTop: 500 }, "slow");
return false;
});
I can see the ScrollTop in my Console but there is no animation. I dont know what to do i tried a lot of things. I also tested it in all the different browsers its working nowthere.
The issue is that your selector with href contains # gives a different meaning without the quotes. Once you put # in quotes, it works fine.
$('a[href*="#"]').on('click', function(){
$('html,body').animate({scrollTop: 500}, "slow");
});
Example : https://jsfiddle.net/3vy7adh7/
Or
If you want to avoid the post on any valid a tag,
$('a').on('click', function(e)
{
e.preventDefault();
if($(this).attr('href').indexOf('#') > -1)
$('html,body').animate({scrollTop: 500},"slow");
});
Example : https://jsfiddle.net/3vy7adh7/1/
This should work for you:
$('a[href^="#"]').on('click',function (e) {
var href = $(this).attr('href');
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 180
}, 900, 'swing', function () {
window.location.hash = target;
});
});
I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>
So, I'm quite new to javascript and building a site where I'm trying to have animated scrolls on the page.
To enable animated scroll to a link I'm using this code:
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
To scroll to the top of the page I am using this code.
//<-- scroll top -->
var $top = jQuery.noConflict();
$top("#scroll-top").hide();
// fade in #scroll-top
$top(window).scroll(function () {
if ($top(this).scrollTop() > 150) {
$top('#scroll-top').fadeIn();
} else {
$top('#scroll-top').fadeOut();
}
});
// scroll body to 0px on click
$top('#scroll-top a').click(function () {
$top('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
They both work fine independently, but not together.
Can anybody help me find out why they conflict, and how to solve the conflict?
So, this is how I fixed my issue:
I removed the conflicting code " // scroll body to 0px on click " and instead use the animated scroll to anchor link to animate both functions, with a placed on top of the page as well.
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
I works fine, but I am missing only one feature, that the javascript recognises internal links that start with anything else than #. Right now it doesn't recognise for example this link http://julebord.bedriftsdesign.no/julebord.html#julemeny. It only works if I use this: #julemeny