如何在单击按钮时滚动回到页面顶部？

Question

I am creating my product pages by using the object tag code, but every time I click the "view" button, the next page is staying at the same position of previous page which I just viewed. How can I add functionality that will let me view from the top of page every time I click the "view" button?

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

When I click the "View Details" button at a specific position "x" here: http://postimg.org/image/vgs0lwhtr/

The next page shows the same position "x", but I want it to jump to the top of page: http://postimg.org/image/vn80e2lph/

Answer 1

Using Javascript:

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

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

please refere this , may this help

Answer 3

Sometimes placing scroll to body doesn't work if your current content is generated through jQuery (as it was in my case). In such situation you can just do following.

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

Answer 4

A small issue with Subhash's jQuery solution is that you must call this code within $(document).ready() in order for your $('body') selector to work. The ready event may not fire before parts of your page have been rendered to the screen.

An better approach is to simply modify the user's location as a work-around to this browser 'feature':

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

Answer 5

Simple HTML solution for jumping between page parts

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

Back to top button, works in all browsers.To change the scroll speed simply change the x in counter -= x here 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

Assign an id="#body" and tabindex in the <body> tag

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

and use jquery focus()

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

Answer 8

You can use this method:

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