在单独的.html页面之间滚动

Scroll between separate .html pages

本文关键字：之间 滚动 html 单独      更新时间：2023-09-26

很多滚动jquery插件的工作方式是这样的：http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html和http://alvarotrigo.com/fullPage/#firstPage

它们在各部分之间滚动。

问题：是否还有在.html页面之间滚动的插件或解决方案：

  • 向上（到达顶部时，它会滚动到上一页）和
  • 向下（到达底部时，它会滚动到下一页）

示例但不像我想要的那样工作：

http://vostrel.cz/so/9652944/page.html

它使用以下代码：

(function($){
var jump=function(e)
{
   if (e){
       e.preventDefault();
       var target = $(this).attr("href");
   }else{
       var target = location.hash;
   }
   $('html,body').animate(
   {
       scrollTop: $(target).offset().top
   },1000,function()
   {
       location.hash = target;
   });
}
$('html, body').hide()
$(document).ready(function()
{
    $('a[href^=#]').bind("click", jump);
    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show()
            jump()
        }, 0);
    }else{
      $('html, body').show()
    }
});
})(jQuery)

在这里看到它的工作：http://vostrel.cz/so/9652944/page.html

但是当到达第 1 页的顶部滚动时，它会错过 （A） 和 （B） 到达第 2 页的底部滚动时和 （C） 向上滚动时，向下滚动时向下滚动。该示例总是向同一方向滚动，这也是一个问题。

上面的代码只是一个示例。也许有人有更好的代码。主要目的是让我的想法清楚。希望这能说明我想要实现的目标。提前感谢任何帮助。

在水平滚动（滑动）方向（或者如果您愿意，可以在垂直方向上更改），可以通过以下方式完成：

.HTML：

<div data-role="page" id="city" class="demo-page" data-dom-cache="true" data-theme="a" data-prev="prevCity" data-next="nextCity" data-url="city">
<!-- "city", "prevCity" and "nextCity" are used as placeholders and contain the name of the applicable city in our demo files. -->
<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-tap-toggle="false">
    <h1>City</h1>
    <a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->
<div data-role="content">
    <div id="trivia-city" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="d">
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <p>Here some text.</p>
    </div><!-- /popup -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-id="ftr" data-tap-toggle="false">
    <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
        <a href="#" class="prev" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="d">Previous</a>
        <a href="#" class="next" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="d">Next</a>
    </div>
    <a href="#trivia-city" data-rel="popup" class="trivia-btn ui-btn-right" data-role="button" data-icon="info" data-iconpos="left" data-theme="d" data-mini="true">Trivia</a>
</div><!-- /footer -->

.JS：

$( document ).on( "pageinit", "[data-role='page'].demo-page", function() {
var page = "#" + $( this ).attr( "id" ),
    // Get the filename of the next page that we stored in the data-next attribute
    next = $( this ).jqmData( "next" ),
    // Get the filename of the previous page that we stored in the data-prev attribute
    prev = $( this ).jqmData( "prev" );
// Check if we did set the data-next attribute
if ( next ) {
    // Prefetch the next page
    $.mobile.loadPage( next + ".html" );
    // Navigate to next page on swipe left
    $( document ).on( "swipeleft", page, function() {
        $.mobile.changePage( next + ".html", { transition: "slide" });
    });
    // Navigate to next page when the "next" button is clicked
    $( ".control .next", page ).on( "click", function() {
        $.mobile.changePage( next + ".html", { transition: "slide" } );
    });
}
// Disable the "next" button if there is no next page
else {
    $( ".control .next", page ).addClass( "ui-disabled" );
}
// The same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
    $( document ).on( "swiperight", page, function() {
        $.mobile.changePage( prev + ".html", { transition: "slide", reverse: true } );
    });
    $( ".control .prev", page ).on( "click", function() {
        $.mobile.changePage( prev + ".html", { transition: "slide", reverse: true } );
    });
}
else {
    $( ".control .prev", page ).addClass( "ui-disabled" );
}

}）;

.CSS：

/* Set the background image sources */
#newyork { background-image: url(../../_assets/img/newyork.jpg); }
#buenosaires { background-image: url(../../_assets/img/buenosaires.jpg); }
#paris { background-image: url(../../_assets/img/paris.jpg); }
#capetown { background-image: url(../../_assets/img/capetown.jpg); }
#seoul { background-image: url(../../_assets/img/seoul.jpg); }
#sydney { background-image: url(../../_assets/img/sydney.jpg); }
/* Background settings */
.demo-page {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Transparent footer */
.demo-page .ui-footer {
    background: none;
    border: none;
    bottom: 0;
}
/* The footer won't have a height because there are only two absolute positioned elements in it.
So we position the buttons from the bottom. */
.control.ui-btn-left, .trivia-btn.ui-btn-right {
    top: auto;
    bottom: 7px;
    margin: 0;
}
/* Custom styling for the trivia source */
small {
    font-size: .75em;
    color: #666;
}
/* Prevent text selection while swiping with mouse */
.demo-page .ui-header, .ui-title, .control .ui-btn, .trivia-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

演示：http://demos.jquerymobile.com/1.3.2/examples/swipe/newyork.html

文档：http://demos.jquerymobile.com/1.3.2/examples/swipe/swipe-page.html

相关文章：