I. jquery returns to the top
$("html , body").animate(,'slow');
Second, jQuery judges the sliding direction of the mobile screen
$('body').on('touchstart', function(e) { var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; startY = touch.changedTouches[0].pageY; $('body').on('touchmove', function(e) { touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if (touch.pageX - startX > 10) { console.log("Right stroke"); showPrevious(); $('body').off('touchmove'); } else if (touch.pageX - startX < -10) { console.log("Left stroke"); showNext(); $('body').off('touchmove'); }; if (touch.pageY - startY > 10) { console.log("Underline"); $('body').off('touchmove'); } else if (touch.pageY - startY < -10) { console.log("Top stroke"); $('body').off('touchmove'); }; }); // Return false to prevent image // highlighting on Android return false; }).on('touchend', function() { $('body').off('touchmove'); });
III. the page moves to the corresponding position to start the animation
When the orange container enters the visible area from below (or after entering a certain height), the animation in the container plays.
var eTop=$(element).offset().top;//Orange container distance from the top of the entire page var wTop=$(window).height();//Height of visible area of green box window.onresize=funciton(){ var wTop=$(window).height();//The height of the zoom window will change. You need to get it again } $(window).scroll(funciont(){ var dTop = $(document).scrollTop();//The distance from the top of the green box to the top of the black page will change in real time //So how to judge when the orange container enters the visible area? //Put it in the scroll event if(dTop+wTop > eTop){//Animation playback events} });
In this way, when the height above the visible area + the height of the visible area > the height of the container from the top, we know that the container enters the [bottom of the visible area]
If you want the container to enter a distance (such as 100px) and trigger the animation again?
//Put it in the scroll event if(dTop+wTop-100 > eTop){//Animation playback events}
4. Enable and disable the scroll bar
//Disable scrollbar
$(document.body).css({ "overflow-x":"hidden", "overflow-y":"hidden" }); //Enable scroll bar $(document.body).css({ "overflow-x":"auto", "overflow-y":"auto" });