js中当一个页面滚动到最底部的时候想返回到前一页,如何保持原来页面的状态不变_框架

您好！具体代码如下，兼容各浏览器，其中scrollTop 为当前页面到顶部的距离，documentbodyoffsetHeight为整个页面的高度，documentdocumentElementclientHeight为当前屏幕的高度，有不明白的可以问我，希望我的回答能帮到您！

<!DOCTYPE html>

<html>

<head>

<meta ;

js监视滚动事件的函数是onscroll

js语法：elementonscroll = functionReference

html语法：<element onscroll="myScript">

vue监听滚动事件实现滚动监听的制作步骤：

在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src=">

jquerydownCountjs是依赖于jQuery的插件（效果：倒计时），所以我们需要查看该插件的源码才能将其变成源生代码。

html代码：

</div>

上面span中的class类是用于显示需要的类，在插件中days、hours、minutes、seconds分别用于显示天数、小时、分钟、秒，days_ref、hours_ref、minutes_ref、seconds_ref分别用于显示单位days或day，hours或hour、minutes或minute、seconds或second。这些类都没有定义相应的样式，需要自己自定义样式。

js代码，只是简易的提了出来，如果需要更灵活的配置，自己再做进一步封装：

(function () {

var container = documentquerySelector("p1");

var mydate = '1/27/2019 00:00:00',

myoffset = 10,

callback = function () {

alert("执行完毕");

};

Change client's local date to match offset timezone

@return {Object} Fixed Date object

var currentDate = function () {

// get client's current date

var date = new Date();

// turn date to utc

var utc = dategetTime() + (dategetTimezoneOffset() 60000);

// set new Date object

var new_date = new Date(utc + (3600000myoffset));

return new_date;

};

Main downCount function that calculates everything

function countdown () {

var target_date = new Date(mydate), // set target date

current_date = currentDate(); // get fixed current date

// difference of dates

var difference = target_date - current_date;

// if difference is negative than it's pass the target date

if (difference < 0) {

// stop timer

clearInterval(interval);

if (callback && typeof callback === 'function') {

callback();

}

return;

}

// basic math variables

var _second = 1000,

_minute = _second 60,

_hour = _minute 60,

_day = _hour 24;

// calculate dates

var days = Mathfloor(difference / _day),

hours = Mathfloor((difference % _day) / _hour),

minutes = Mathfloor((difference % _hour) / _minute),

seconds = Mathfloor((difference % _minute) / _second),

// fix dates so that it will show two digets

days = (String(days)length >= 2) days : '0' + days,

hours = (String(hours)length >= 2) hours : '0' + hours,

minutes = (String(minutes)length >= 2) minutes : '0' + minutes,

seconds = (String(seconds)length >= 2) seconds : '0' + seconds;

// based on the date change the refrence wording

var ref_days = (days === 1) 'day' : 'days',

ref_hours = (hours === 1) 'hour' : 'hours',

ref_minutes = (minutes === 1) 'minute' : 'minutes',

ref_seconds = (seconds === 1) 'second' : 'seconds';

// set to DOM

documentquerySelector('days')innerHTML = days;

documentquerySelector('hours')innerHTML = hours;

documentquerySelector('minutes')innerHTML = minutes;

documentquerySelector('seconds')innerHTML = seconds;

documentquerySelector('days_ref')innerHTML = ref_days;

documentquerySelector('hours_ref')innerHTML = ref_hours;

documentquerySelector('minutes_ref')innerHTML = ref_minutes;

documentquerySelector('seconds_ref')innerHTML = ref_seconds;

};

// start

var interval = setInterval(countdown, 1000);

})();

1scrollBy(x,y)

scrollBy()方法可把内容滚动指定的像素数。

x：必需。把文档向右滚动的像素数。

y：必需。把文档向下滚动的像素数。

例：windowscrollBy(100,100);

注意：要使此方法工作 window 滚动条的可见属性必须设置为true！

2scrollTo(x,y)

scrollTo()方法可把内容滚动到指定的像素数。

例：windowscrollTo(10,50);

3scrollTop

scrollTop()方法返回或设置匹配元素的滚动条的垂直位置（属于 HTMLElement 的属性）。

原生JS *** 作：documentbodyscrollTop=0;

jQuery *** 作：$(document)scrollTop(0);

4scrollY

scrollY，读取页面滚动条的垂直距离，貌似只能读取不能设置（属于 window 的属性）。

例：windowscrollY

5onscroll()事件

例：windowonscroll=function(){｝;

常用实例：

点击右下角置顶按钮，页面缓缓的返回顶部。

var timer=setInterval(function(){

windowscrollBy(0,-30);

if(windowscrollY===0){

clearInterval(timer);

}

},10);

以上就是关于js中当一个页面滚动到最底部的时候想返回到前一页,如何保持原来页面的状态不变全部的内容，包括:js中当一个页面滚动到最底部的时候想返回到前一页,如何保持原来页面的状态不变、如何用js监听滚动条滚动事件、将以下jq代码转换为原生js等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9768609.html

js中当一个页面滚动到最底部的时候想返回到前一页,如何保持原来页面的状态不变

发表评论

评论列表（0条）