如何在單擊按鈕時滾動回到頁面頂部？

Question

我正在使用對象標記代碼創建產品頁面，但是每次單擊“查看”按鈕時，下一頁將停留在與上一頁相同的位置。 如何添加每次單擊“查看”按鈕時都可以從頁面頂部查看的功能？

<div id="container" class="clearfix"><!--! end of #sidebar -->
    <div class="holder"></div>
    <div id="content" class="defaults"><!-- navigation holder -->
        <div id="title2">Office Section</div>

        <!-- item container -->
        <ul id="itemContainer">
            <li>
                <div id="product">
                    <div id="title">FuBang®</div>
                    <div class="imageOuter" style="margin:0">
                        <a class="image" href="officesection010.html">
                            <span class="rollover" ></span>
                            <img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" />
                        </a>
                    </div><br />
                    <div id="text">Sofa </div><br />
                    <div id="button">
                        <a href="officesection010.html">View Details</a>
                    </div>
                </div>
            </li>
        </ul>
        <br />
        <div id="title2"></div>
        <div class="holder"></div>
    </div>
    </div> <!--! end of #content -->
</div> <!--! end of #container -->

當我在此處的特定位置“ x”上單擊“查看詳細信息”按鈕時： http : //postimg.org/image/vgs0lwhtr/

下一頁顯示相同的位置“ x”，但我希望它跳至頁面頂部： http : //postimg.org/image/vn80e2lph/

Answer 1

使用Javascript：

document.body.scrollTop = document.documentElement.scrollTop = 0;

使用jQuery：

$(function() {
   $('body').scrollTop(0);
});

Answer 2

<a href="#" ID="backToTop"></a>

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        //$("html, body").scrollTop(0); //For without animation
        return false;
    });
});

請參考這個，對您有幫助

Answer 3

有時，如果您當前的內容是通過jQuery生成的，則將滾動到正文不起作用（在我的情況下）。 在這種情況下，您可以執行以下操作。

$(function() {
   $('html').scrollTop(0);
});

Answer 4

Subhash的jQuery解決方案的一個小問題是，您必須在$(document).ready()中調用此代碼，才能使$('body')選擇器正常工作。 在將部分頁面呈現到屏幕之前， ready事件可能不會觸發。

更好的方法是簡單地修改用戶的位置，以解決此瀏覽器“功能”：

//Above all of your $(document).ready(...) code
document.location = "#";

Answer 5

用於頁面部分之間跳轉的簡單HTML解決方案

// Place a tag like this where you would like to go
// in your case at the top
<a name="top"></a>

// you will reach there by click of this link  better use an image reach their by clicking on this we can also use an image, align in right 

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

Answer 6

返回頁首按鈕，在所有瀏覽器中都有效。要更改滾動速度，只需在counter -= x更改x counter -= x x = 10

 function scrollToTop(){ var myBody = document.body; var id = setInterval(secondFunction,1); var height = window.pageYOffset; var counter = height; function secondFunction(){ if(window.pageYOffset == 0){ clearInterval(id); } else { if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){ counter -= 10; counter--; document.documentElement.scrollTop = counter; } else { counter -= 10; counter--; myBody.scrollTop = counter; } } } }

 body { height: 5000px; margin: 0; padding: 0; } .backToTop { position: fixed; /* Fixed at page */ top: auto; bottom: 20px; left: auto; right: 20px; background-color: crimson; color: white; padding: 5px; cursor: pointer; } header { position: relative; top: 0; left: 0; width: 100%; height: 100px; background-color: black; }

 <!-- back to top button --> <span class="backToTop" onclick="scrollToTop()">TOP</span> <!-- Header --> <header> </header>

Answer 7

在<body>標記中分配一個id =“＃body”和tabindex

<body id="#body" tabindex="1">

並使用jquery focus（）

$(function() {
    $("#body").attr("tabindex",-1).focus();
}

Answer 8

您可以使用以下方法：

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

如何在單擊按鈕時滾動回到頁面頂部？

問題描述

8 個解決方案

解決方案1
12 2013-10-11 06:09:07

解決方案2
3 2013-10-11 06:29:24

解決方案3
3 2016-05-04 09:48:37

解決方案4
1 2013-10-11 06:12:56

解決方案5
1 2013-10-11 07:06:45

解決方案6
1 2016-10-19 10:59:42

解決方案7
0 2013-10-11 07:00:33

解決方案8
0 2017-02-01 18:08:01

如何在單擊按鈕時滾動回到頁面頂部？

問題描述

8 個解決方案

解決方案1 12 2013-10-11 06:09:07

解決方案2 3 2013-10-11 06:29:24

解決方案3 3 2016-05-04 09:48:37

解決方案4 1 2013-10-11 06:12:56

解決方案5 1 2013-10-11 07:06:45

解決方案6 1 2016-10-19 10:59:42

解決方案7 0 2013-10-11 07:00:33

解決方案8 0 2017-02-01 18:08:01

解決方案1
12 2013-10-11 06:09:07

解決方案2
3 2013-10-11 06:29:24

解決方案3
3 2016-05-04 09:48:37

解決方案4
1 2013-10-11 06:12:56

解決方案5
1 2013-10-11 07:06:45

解決方案6
1 2016-10-19 10:59:42

解決方案7
0 2013-10-11 07:00:33

解決方案8
0 2017-02-01 18:08:01