javascript 顶部和底部滚动功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 顶部和底部滚动功能相关的知识,希望对你有一定的参考价值。

// To Top and Bottom Functionality
	nextQuery("#toTop").click(function(){
	    nextQuery('html,body').animate({scrollTop: 0}, 1500);
	});
	nextQuery("#toBottom").click(function() {
	  var window_height = nextQuery(window).height();
	    var document_height = nextQuery(document).height();
	    nextQuery('html,body').animate({ scrollTop: window_height + document_height },1500);
	});
	
// ***NEW*** To Top Functionality with FadeIn and FadeOut based on scroll
var offset = 250;
var duration = 300;

jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.backToTop').fadeIn(duration);
    } else {
        jQuery('.backToTop').fadeOut(duration);
    }
});

jQuery(".backToTop").click(function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop: 0}, 500);
});

// SCROLL TO A SPECIFIC ELEMENT ON THE PAGE ON CLICK
$( document ).ready(function() {
    $('.slideshow__buttons > div.slideshow__button:last-child > a.slideshow__button-cta').click(function() {
        $('html,body').animate({ scrollTop: ($('.index-section--newsletter').offset().top) },1000);
    });
});

以上是关于javascript 顶部和底部滚动功能的主要内容,如果未能解决你的问题,请参考以下文章