如何滚动回页面上的按钮点击？

我正在使用对象标记代码创建我的产品页面，但每次单击“查看”按钮时，下一页都停留在刚刚查看的上一页的相同位置。每次点击“查看”按钮时，如何添加可让我从页面顶部查看的功能？如何滚动回页面上的按钮点击？

<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

如何滚动回页面上的按钮点击？

回答

相关问题