div {
height: 800px;
width: 400px;
border: 2px solid black;
#container{
position: fixed;
margin:50px 500px;
该锚点法,不需要任何的js代码,即可实现跳转的方法。缺点:点击链接url发生变化,刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用,对于.cshtml页面不起作用。
2.用animate属性,当点击锚点后,页面滚动到相应的DIV。
接着上面的代码,具体添加如下代码:
html页面:
<div id="container">
<p id="p1">div1</p>
<p id="p2">div2</p>
<p id="p3">div3</p>
</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
css样式页面同上,看下js代码如下:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
$(document).ready(function() {
$("#p1").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#p2").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#p3").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
3.简单的window.scrollTo方法使用
即滚动到坐标为(100,500)的地方。比较单一,且没有缓慢的效果
function scrollWindow(){
window.scrollTo(100,500);
4.用js的srollIntoView方法进行使用。这里贴下代码:
html页面:
<li><a href="javascript:;" data-tab="eat">吃饭</a></li>
<li><a href="javascript:;" data-tab="sleep">睡觉</a></li>
<li><a href="javascript:;" data-tab="walk">逛街</a></li>
<div data-tab="eat" style="background:cyan; height:500px;">
<div data-tab="sleep" style="background:lightgreen;height:2000px;">
<div data-tab="walk" style="background:LightSalmon;height:1000px;">
js代码如下:
[].slice.call(document.querySelectorAll('a')).forEach(function(el){
el.addEventListener('click', function(){
var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
target.scrollIntoView(true);
注意一个问题,object.scrollIntoView(bool),前面是对象,通常原生的获取对象都是下面的写法:
document.getElementById('#xxx' ).scrollIntoView(true);
那么如果用jquery来调用该方法的话,需要写成下面这样的:
$('#xxx')[0].scrollIntoView(true);
浅析Qt(C++),QML与HTML之间的交互写在前面本文适合有一定Qt及HTML经验的人阅读。Qt(C++)和QML间交互想要了解Qt(C++)和QML间的信息交互,就不得不提到Qt的信号与槽机制。信号与槽信号与槽是qt的特有信息传输机制。它本质上是一种观察者模式。当某个事件触发时,它就会发出一个类似广播的信号。如果有对象对这个信号感兴趣,它就使用连接函数,将想要处理的信号和自己的一个函数(qt...
1.通过QWebEngineView引入html页面, .pro文件中引入webenginewidgets,webengine,network,webchannel组件
组件可以通过QT软件根目录的MaintenanceTool.exe安装,设置中选择临时资料档案库,临时资料档案库可以在网上找资源路径(我用的是:http://mirrors.ustc.edu.cn/qtproject/online/qtsdkrepository/mac_x64/root/qt/,如果临时资料档案库测试是失败的,可能是因为没
0.简述QWebSocket配合QWebChannel,可以将QObject暴露给HTML客户端。如Qt文档所述,通过将QObject派生对象发布到QWebChannel并在HTML端使用qwebchannel.js,可以透明的访问QObject的属性和public槽/方法。不需要手动消息传递和数据序列化,C++端的属性更新和信号发射会自动传输到可能远程运行的HTML客户端。在客户端,将为任何已发...
通过qtmtypes方式配置qObject对象导出,在qml文件中 import io.qt.examples.backend 1.0 配置导入名称和指定版本.两种方式,1种为 CONFIG += qmltypes
QML_IMPORT_NAME = io.qt.examples.backend
QML_IMPORT_MAJOR_VERSION = 1
第二种为 c++中 注册qml类型 qmlRegisterType<BackEnd2>("io.qt.examples.backend2", 1, 0, "BackEnd2");
写在前面本文适合有一定Qt及HTML经验的人阅读。Qt(C++)和QML间交互想要了解Qt(C++)和QML间的信息交互,就不得不提到Qt的信号与槽机制。信号与槽信号与槽是qt的特有信息传输机制。它本质上是一种观察者模式。当某个事件触发时,它就会发出一个类似广播的信号。如果有对象对这个信号感兴趣,它就使用连接函数,将想要处理的信号和自己的一个函数(qt中成为槽)绑定来进行处理。当信号发出时,槽函数...
解决方案:
在vc目录下找到vcredist_x64.exe(找自己对应版本),安装(考虑把运行时库同时发布到程序目录或者制作安装程序,同时安装vcredist_x64.exe),重启之后不再报缺少VC运行时库。
接着运行程序挂掉了,提示挂在了Qt5WebEngineCore.dll中,...