一般很多網站都會有一些這樣的效果來提升使用者的體驗度,返回頂部的功能啊,當然也包括一些頂部的選單滑動顯示隱藏的功能等

也是記錄一下以便以後方便拿來用,有需要的也給您提供一份便捷.可能寫的不太好,歡迎交流探討

簡單的舉個栗子:

上滑效果:

上滑效果:

返回頂部效果:

記錄一些效果:

1,簡單的動畫實現返回頂部,或者你想要去到的位置

    // 頁面返回響應位置
    $(".fixedmodular1").click(function () {
        // 返回.main元素的位置
        let target_top = $(".main").offset().top;
                
 
//設定動畫效果,不會中斷滾動
        $("html,body").animate({ scrollTop: target_top }, 1000);
                //返回頂部
               //$("html,body").animate({ scrollTop: 0}, 1000);
    })        

感覺這樣確實不是很友好,很簡單粗暴.

2,返回頂部的圖示,顯示隱藏,包括頂部的樣式也是同樣的套路

$(window).scroll(function() {
    var scrolltop = $(this).scrollTop(); //滾動條
    var
 
 windowheight = $(this).height(); //視覺化視窗高度
    if (scrolltop >= windowheight) {
        $('#top').show()
    } else {
        $('#top').hide()
    }
})

3,返回頂部的操作

var timer = null
$('#top').click(function() {
    timer = setInterval(function() {
        var osTop = document.documentElement.scrollTop||document.body.scrollTop;
        
 
var ispeed = Math.floor(-osTop / 6);
        //獲取滾動條距離頂部的高度
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        if (osTop == 0) {
            clearInterval(timer);
        }
    }, 30);
})

//在滾動的過程中滑動滑鼠中止滾動,停到當前滾動的位置
window.addEventListener('DOMMouseScroll',mouseScrollMove,false) window.addEventListener('mousewheel',mouseScrollMove,false)
functionmouseScrollMove(e){ vareM=e.wheelDelta||e.detail; varmoveLen=Math.max(-1,Math.min(1,eM)); if(moveLen<0){//向下滾動 clearInterval(timer); }else{//向上滾動 clearInterval(timer); } }