javascript - trigger - jquery top




使用JavaScript/jQuery滾動到頁面頂部? (20)

$(document).scrollTop(0); 也適用。

我在頁面上有一個<button> ,當按下這個按鈕時,使用jQuery顯示一個隱藏的<div>

如何使用該函數中的JavaScript / jQuery命令滾動到頁面的頂部? 即使滾動條立即跳到頂端,也是可取的。 我不是在尋找一個平滑的滾動。


試試這個在頂部滾動

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

lot users建議選擇html和body標籤以實現跨瀏覽器兼容性,如下所示:

$('html, body').animate({ scrollTop: 0 }, callback);

儘管如果你只需要運行一次回調,這可能會讓你失望。 實際上它會運行兩次,因為你選擇了兩個元素。

如果這對你來說是個問題,你可以這樣做:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

這是因為Chrome $('html').scrollTop()返回0,但在Firefox等其他瀏覽器中不會。

如果您不想在滾動條已位於頂部的情況下等待動畫完成,請嘗試以下操作:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}


你不需要jQuery來做到這一點。 一個標準的HTML標籤就足夠了...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

你可以嘗試在這個小提琴中使用JS http://jsfiddle.net/5bNmH/1/

在頁面頁腳中添加“轉到頂部”按鈕:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

嘗試這個

<script>
    $(window).scrollTop(100);
</script>

嘗試這個

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>

如果你不需要改變動畫,那麼你不需要使用任何特殊的插件 - 我只是使用本地JavaScript window.scrollTo方法 - 傳入0,0將立即滾動頁面到左上角。

window.scrollTo(x-coord, y-coord);

參數

  • x坐標是沿水平軸的像素。
  • y坐標是沿著垂直軸的像素。

如果你想做平滑的滾動,請嘗試這個:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

另一個解決方案是JavaScript window.scrollTo方法:

 window.scrollTo(x-value, y-value);

參數:

  • x值是沿著水平軸的像素。
  • y值是沿著垂直軸的像素。

如果您想滾動到任何帶ID的元素,請嘗試以下操作:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``

平滑滾動,純javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

所有這些建議都適用於各種情況。 對於那些通過搜索找到該頁面的人,也可以嘗試一下。 JQuery,沒有插件,滾動到元素。

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

激活所有瀏覽器。 祝你好運

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }

window.scrollTo(0, 0); 速度非常快
所以我嘗試了馬克烏爾西諾的例子,但在Chrome中沒有任何反應
我發現這一點

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

測試了所有3個瀏覽器並且它可以正常工作
我正在使用藍圖的CSS
這是當客戶點擊“立即預訂”按鈕並且沒有選擇出租期時,緩慢地移動到日曆所在的頂部,並打開指向2個字段的對話框div,在3秒後它消失


當頂部滾動頂部小於限制底部和底部到頂部滾動標題是粘滯。 下面請參閱小提琴示例。

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/


舊的#top可以做到這一點

document.location.href = "#top";

在FF,IE和Chrome中正常工作


試試這個代碼:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom要移動滾動的元素。

時間=>毫秒,定義滾動的速度。


<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

在html中

<a href="#top">go top</a>

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>




scroll