如何滾動回頁面上的按鈕點擊？

我正在使用對象標記代碼創建我的產品頁面，但每次單擊「查看」按鈕時，下一頁都停留在剛剛查看的上一頁的相同位置。每次點擊「查看」按鈕時，如何添加可讓我從頁面頂部查看的功能？如何滾動回頁面上的按鈕點擊？

<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/

來源

2013-10-11 user2869761

可能的重複：http://stackoverflow.com/questions/2857007/jquery-toggle-clicking-on-link-jumps-back-to-top-of-the-page – Ashish

檢查： - 。 http://stackoverflow.com/questions/17199724/scroll-to-top-javascript-in-html-website –

使用Javascript

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

使用jQuery：

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

來源

2013-10-11 06:09:07

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

一種更好的方法是簡單地修改用戶的位置作爲一個變通到這個瀏覽器「功能」：

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

來源

2013-10-11 06:12:56

<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; 
    }); 
});

請參考，this，可以此幫助

來源

2013-10-11 06:29:24

分配ID =「＃body」和tabindex中的<body>標記

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

周使用jQuery的焦點（）的頁面部分之間跳躍

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

來源

2013-10-11 07:00:33

簡單的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>

來源

2013-10-11 07:06:45 Rex

有時將滾動身體不一樣，如果是通過jQuery的生成當前的工作內容（如這是在我的情況）。在這種情況下，你可以做下面的事情。

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

來源

2016-05-04 09:48:37

返回頂部按鈕，可以在所有browsers.To改變滾動速度根本改變x在這裏counter -= xx = 10

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

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>

來源

2016-10-19 10:59:42

您可以使用此方法：

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

來源

2017-02-01 18:08:01

如何滾動回頁面上的按鈕點擊？

回答

相關問題